CSS / 선택자(Selector) / 전체 선택자, 타입 선택자, 속성 선택자

전체 선택자

전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어

는 모든 요소의 색을 파란색으로 만듭니다.

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉,

는 같은 결과를 만듭니다.

타입 선택자

타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다. 예를 들어

는 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다.

속성선택자

속성 선택자(Attribute Selector)는 특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택합니다. 속성선택자는 다음과 같이 7가지 형태가 있습니다.

  • [attribute]
  • [attribute="value"]
  • [attribute~="value"]
  • [attribute|="value"]
  • [attribute^="value"]
  • [attribute$="value"]
  • [attribute*="value"]

[attributename]

attributename 속성을 가진 요소를 선택합니다. 예를 들어

은 title 속성을 가진 h1 요소를 선택합니다.

[attributename="value"]

attributename 속성의 값이 value인 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc인 h1 요소를 선택합니다. 주의할 점은 속성값이 정확히 일치해야 한다는 것입니다. 예를 들어

은 선택되지만,

은 선택되지 않습니다.

[attributename~="value"]

attributename 속성의 값이 value를 포함한 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다. 포함 여부는 단어 기준으로 판단합니다. 예를 들어

은 선택되지만,

은 선택되지 않습니다.

[attributename|="value"]

attributename 속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc이거나 abc-로 시작하는 h1 요소를 선택합니다.

은 선택되고,

은 선택되지 않습니다.

[attributename^="value"]

attributename 속성의 값이 value로 시작하는 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc로 시작하는 h1 요소를 선택합니다. 단어 기준이 아니라 문자열 기준입니다. 따라서

모두 선택됩니다.

[attributename$="value"]

attributename 속성의 값이 value로 끝나는 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc로 끝나는 h1 요소를 선택합니다. 단어 기준이 아니라 문자열 기준입니다. 따라서

모두 선택됩니다.

[attributename*="value"]

attributename 속성의 값이 value를 포함한 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다. 포함 여부는 문자열 기준으로 판단합니다. 따라서

모두 선택됩니다.