Front-End/CSS

CSS 선택자 종류

HSHyeon 2025. 1. 16. 11:02

반드시 기억해야 하는 CSS 선택자 30개 요약

1. Universal Selector (*)

  • 모든 요소를 선택.
  • 사용 시 브라우저 성능에 부담을 줄 수 있으므로 남용하지 않는 것이 좋음.

2. ID Selector (#id)

  • 특정 ID를 가진 요소 선택.
  • 유일성을 가지므로 재사용성이 낮음.

3. Class Selector (.class)

  • 특정 클래스를 가진 요소를 선택.
  • 여러 요소에 적용 가능, 재사용성이 높음.

4. Descendant Selector (X Y)

  • 특정 요소 내에 포함된 자손 요소 선택.
  • 예: li a → <li> 내의 <a> 요소를 선택.

5. Type Selector (X)

  • 특정 태그 타입의 모든 요소를 선택.
  • 예: ul → 모든 <ul> 요소 선택.

6. Pseudo-classes (X:visited, X:link)

  • 특정 상태의 요소 선택.
    • :link: 방문하지 않은 링크.
    • :visited: 방문한 링크.

7. Adjacent Sibling Selector (X + Y)

  • 특정 요소 바로 뒤의 형제 요소 선택.

8. Child Selector (X > Y)

  • 특정 요소의 직계 자식 요소 선택.

9. General Sibling Selector (X ~ Y)

  • 특정 요소 뒤의 모든 형제 요소 선택.

10. Attribute Selector (X[attribute])

  • 특정 속성을 가진 요소를 선택.
    • 예: a[title] → title 속성이 있는 <a> 태그 선택.

11. Attribute with Exact Value (X[attr="value"])

  • 특정 속성이 특정 값을 가지는 요소 선택.

12. Attribute Contains Substring (X[attr*="value"])

  • 속성 값에 특정 문자열이 포함된 요소 선택.

13. Attribute Starts with (X[attr^="value"])

  • 속성 값이 특정 문자열로 시작하는 요소 선택.

14. Attribute Ends with (X[attr$="value"])

  • 속성 값이 특정 문자열로 끝나는 요소 선택.

15. Custom Attributes (X[data-*="value"])

  • data-* 속성을 활용한 선택.

16. Attribute with Space-separated Values (X[attr~="value"])

  • 띄어쓰기로 구분된 속성 값에서 특정 값을 가진 요소 선택.

17. Checked Pseudo-class (X:checked)

  • 체크된 라디오 버튼이나 체크박스를 선택.

18. Pseudo-elements (X:after, X:before)

  • 요소의 전후에 콘텐츠를 생성.
    • :after: 요소 뒤에 콘텐츠 추가.

19. Hover Pseudo-class (X:hover)

  • 사용자가 요소 위에 마우스를 올렸을 때 특정 스타일 적용.

20. Negation Pseudo-class (X:not(selector))

  • 특정 선택자를 제외한 요소 선택.

21. Structural Pseudo-elements (X::first-line, X::first-letter)

  • 요소의 첫 번째 줄이나 첫 글자만 스타일링.

22. nth-child (X:nth-child(n))

  • 특정 순서의 자식 요소 선택.
    • n은 정수 또는 n 표현식.

23. nth-last-child (X:nth-last-child(n))

  • 끝에서부터 특정 순서의 자식 요소 선택.

24. nth-of-type (X:nth-of-type(n))

  • 특정 태그 타입에서 특정 순서의 요소 선택.

25. nth-last-of-type (X:nth-last-of-type(n))

  • 끝에서부터 특정 타입의 요소 선택.

26. first-child (X:first-child)

  • 부모의 첫 번째 자식 요소 선택.

27. last-child (X:last-child)

  • 부모의 마지막 자식 요소 선택.

28. only-child (X:only-child)

  • 부모의 유일한 자식 요소 선택.

29. only-of-type (X:only-of-type)

  • 부모 내 특정 타입의 유일한 요소 선택.

30. first-of-type (X:first-of-type)

  • 특정 타입의 첫 번째 형제 요소 선택.

결론

  • 브라우저 호환성: 대부분의 선택자는 IE9 이상에서 지원.
  • 성능 주의: 선택자 남용 시 브라우저 렌더링 성능에 영향을 줄 수 있음.
  • 효율적 사용: 선택자를 결합하여 더 강력한 스타일링 구현 가능.