[CSS] 신선한 CSS 선택자!

1. X:visited와 X:link

a:link { color: red; }
a:visited { color: purple; }

• 클릭하기 전 상태의 앵커태그 :link
• 이미 클릭했거나 방문했던 페이지 앵커 태그 :visited

2. X + Y

ul + p { color: red; }

• ul 태그의 바로 뒤 p 선택자 하나만을 스타일링할 때

3. X ~ Y

ul ~ p { color: red; }

• ul 태그의 바로 뒤 p 선택자 여러개들을 스타일링할 때

4. X[title]

a[title] { color: red; }

• title이라는 attribute가 있는 a태그를 스타일링할 때

5. X[href*="nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

• href attribute에 tuts라는 문자열이 모두 포함된 a태그를 스타일링할 때 (nettuts.com, net.tutsplus.com 그리고 tutsplus.com까지도 적용)
• 폭넓은 표현

6. X[href^="http"]

a[href^="http"] { color: red; }

• href attribute가 http라는 문자열로 시작하는 모든 a 태그

7. X[href$=".jpg"]

a[href$=".jpg"] { color: red; }

• href attribute가 .jpg라는 문자열로 끝나는 모든 a 태그

8. X[data-*="foo"]

a[data-filetype="image"] { color: red; }

• data-로 시작하는 attribute를 갖고있는 모든 a 태그

9. X[foo~="bar"]

a[data-info~="external"] {
   color: red;
}
 
a[data-info~="image"] {
   border: 1px solid black;
}

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

• 위의 마크업을 적당한 위치에 쓰면 ~ 속성 선택자 방식을 이용해 두 개의 값 중 하나라도 있는 태그를 대상으로 삼을 수 있다.

10. X:not(선택자)

div:not(#container) { background-color: red; }

• 모든 div 중 id가 container인 것 빼고 background-color 적용할 때

11. X::가상 요소

p::first-letter {} /* 단락의 첫글자 */
p::first-line {} /* 단락의 첫줄 */

12. X:only-of-type

ul > li:only-of-type { font-weight: bold; }

• 부모컨테이너 아래 형제요소가 없는 자식에게만 적용하는 선택자

13. X:empty

• 부모컨테이너 아래 아무 요소가 없는 요소에게 적용하는 선택자

결론

평소에 흔히 사용하지 않은 신선한 CSS 선택자들을 참고해보았다.
이 선택자들을 사용하기 전에 주의해야할 포인트는 브라우저 호환성을 고려해야한다는 점이 있다.
브라우저 호환성을 주의깊게 체크한 후 유용하게 사용할 수 있으면 좋겠다.

출처 및 참고
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048