Knowledge Map

속성 선택자 본문

WEB/HTML&CSS

속성 선택자

2016. 7. 26. 14:12

출처 : 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를 지원하지 않는 웹브라우저에서는 적용되지 않습니다.


'WEB > HTML&CSS' 카테고리의 다른 글

position:absolute & margin:0 auto  (1) 2017.01.31
선택자순위, 단위, 기타 css  (0) 2016.07.26
IE 호환성, 문서모드  (0) 2016.07.04
탭키 이동  (0) 2016.05.30
메타태그 정리  (0) 2016.05.30
Comments