속성 선택자

출처 : https://www.cmsfactory.net/node/11427

속성 선택자(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 속성의 값이 abc인 h1 요소를 선택합니다.

속성값이 정확히 일치해야 선택됩니다. 예를 들어

<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>

모두 선택됩니다.

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

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

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