[attribute]
See the Pen 속성 선택자1 by 석금용 (@gmyong) on CodePen.
해당 attribute를 갖고 있는 요소에 스타일이 적용됩니다.
[attribute="value"]
See the Pen 속성 선택자2 by 석금용 (@gmyong) on CodePen.
해당 attribute 값이 value인 요소에 스타일이 적용됩니다. 다른 클래스랑 같이 쓰인 요소는 불가능하고 value 값이 똑같아야 됩니다.
[attribute~="value"]
See the Pen 속성 선택자4 by 석금용 (@gmyong) on CodePen.
해당 attribute 값이 value인 요소에 스타일이 적용됩니다. 여기서는 다른 클래스랑 같이 쓰인 요소도 스타일이 적용되는 것을 볼 수 있습니다. 그런데 banana-apple을 값으로 가진 요소는 선택이 안된 것을 볼 수 있습니다. 문자열로 되있는 것은 선택되지 않습니다.
[attribute|="value"]
See the Pen 속성 선택자5 by 석금용 (@gmyong) on CodePen.
해당 attribute가 value 값으로 시작되는 요소에 스타일이 적용됩니다. 이 때는 문자열도 선택되는 것을 볼 수 있습니다. 대신 다른 클래스와 같이 쓰인 요소는 적용되지 않은 것을 볼 수 있습니다.
[attribute^="value"]
See the Pen 속성 선택자6 by 석금용 (@gmyong) on CodePen.
해당 attribute가 value 값으로 시작되는 요소에 스타일이 적용됩니다. '|'와는 달리 다른 클래스와 같이 쓰인 요소도 적용되는 것을 볼 수 있습니다. 또한 하이픈이 사용된 요소에도 적용되는 것을 볼 수 있습니다. 언더바로 연결된 요소는 적용되지 않습니다.
[attribute$="value"]
See the Pen pogXpxr by 석금용 (@gmyong) on CodePen.
해당 attribute가 value 값으로 끝나는 요소에 스타일이 적용됩니다. 다른 클래스와 같이 쓰인 요소에도 적용이 됩니다. 언더바 혹은 하이픈으로 이루어진 문자열에도 적용이 됩니다.
[attribute*="value"]
See the Pen 속성 선택자8 by 석금용 (@gmyong) on CodePen.
해당 attribute가 value 값을 포함하고 있는 모든 요소에 스타일이 적용됩니다.
'CSS' 카테고리의 다른 글
| margin collapse 관련 레퍼런스 해석 (마진 병합) (0) | 2020.09.01 |
|---|---|
| <strong>과 <em> 차이점 (0) | 2020.07.30 |
| IR 기법 - 대체 텍스트 숨김 (0) | 2020.07.24 |
| 웹 이미지에 대한 이해 (0) | 2020.07.22 |
| image 하단에 공백이 생기는 이유 (0) | 2020.07.21 |