CSS 강좌 | 선택자 > 속성 선택자(Attribute Selector)

속성선택자

속성 선택자(Attribute Selector)는 특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택합니다.

속성선택자는 다음과 같이 7가지 형태가 있습니다.

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

[attributename]

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

h1[title]

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

[attributename="value"]

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

h1[title="abc"]

title 속성의 값이 abch1 요소를 선택합니다.

주의할 점은 속성값이 정확히 일치해야 한다는 것입니다. 예를 들어

<h1 title="abc">Lorem</h1>

은 선택되지만,

<h1 title="abc xyz">Lorem</h1>

은 선택되지 않습니다.

[attributename~="value"]

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

h1[title~="abc"]

title 속성의 값이 abc를 포함한 h1 요소를 선택합니다.

포함 여부는 단어 기준으로 판단합니다. 예를 들어

<h1 title="abc xyz">Lorem</h1>

은 선택되지만,

<h1 title="abcxyz">Lorem</h1>

은 선택되지 않습니다.

[attributename|="value"]

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

h1[title|="abc"]

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

예를 들어

<h1 title="abc">Lorem</h1>
<h1 title="abc-xyz">Lorem</h1>

은 선택되고,

<h1 title="abc xyz">Lorem</h1>

은 선택되지 않습니다.

[attributename^="value"]

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

h1[title^="abc"]

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

단어 기준이 아니라 문자열 기준입니다. 따라서

<h1 title="abc xyz">Lorem</h1>
<h1 title="abc-xyz">Lorem</h1>

모두 선택됩니다.

[attributename$="value"]

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

h1[title$="abc"]

title 속성의 값이 abc로 끝나는 h1 요소를 선택합니다.

단어 기준이 아니라 문자열 기준입니다. 따라서

<h1 title="xyz abc">Lorem</h1>
<h1 title="xyz-abc">Lorem</h1>

모두 선택됩니다.

[attributename*="value"]

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

h1[title*="abc"]

title 속성의 값이 abc를 포함한 h1 요소를 선택합니다.

포함 여부는 문자열 기준으로 판단합니다. 예를 들어

<h1 title="abc xyz">Lorem</h1>
<h1 title="abcxyz">Lorem</h1>
<h1 title="lmn abc-xyz">Lorem</h1>

모두 선택됩니다.

CSS Level 3

다음 세 선택자는 CSS3에서 추가된 것입니다.

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

CSS3를 지원하지 않는 웹브라우저에서는 적용되지 않습니다.

Category

Created on 2017-02-06 11:09 | Updated on 2017-02-06 11:09

이 글을 공유하기

Kakao

Book navigation