CSS - 선택자(selector)의 종류

CSS는 선택자(selector)와 선언부(declaratives)로 구성이 된다.

CSS 기본적인 문법 구조는 다음와 같습니다.

여기서 선택자 종류는 여러가지가 있는데 그동안 사용했었던 종류와 자주 사용하게 되는 종류를 정리하고자 한다.

1. 태그 선택자(Type Selector)
   패턴(pattern) → 태그이름

2. Class 선택자 (Class Selector)
   패턴(pattern) → .class명

3. ID 선택자 (ID Selector)
   패턴(pattern) → #id명

4. 전체 선택자 (Universal Selector)
   패턴(pattern) →     *   

5. 하위 선택자 (Descendant Combinator)
   패턴(pattern) → 선택자 + " " + 선택자

6. 인접 형제 선택자 (Adjacent Sibling Combinator)
   패턴(pattern) → 선택자 + "+" + 선택자
   첫번째 선택자에 가장 인접한 두번째 선택자에 적용이 된다.
   해당 방법은 부모태그가 div일 경우에는 적용이 안된다.

7. 자식 선택자 (Child Combinator)
   패턴(pattern) → 선택자 + ">" + 선택자
   해당 방법은 5번과 유사하다. 하지만, 다른점으로는 집계 자손만 적용이 된다.

8. 일반 형제 선택자 (General Sibling Combinator)
   패턴(pattern) → 선택자 + "~" + 선택자
   해당 방법은 첫번째 선택자가 닫히고 난 다음 두번째 선택자부터 적용이 된다.

9. 속성 선택자 (Attribute Selectors)
   패턴(pattern) → 선택자[속성]
   아래에 예시처럼 a태그에 title이라는 속성이 있는 a태그에만 style을 적용한다.

하지만 title이라는 속성이 두개 다 적용될 경우도 있을 것이다. 그럴 땐 속성 값까지 입력을 해주면 된다.

여기까지 선택자의 종류를 알아보았다. 선택자 종류에는 가상 선택자도 있지만 가상 선택자는 따로 분류하여 정리하는게 좋다고 생각이 들었다. 왜냐면 각 패턴 별 기능이 많기 때문이다.
가상 선택자는 다음 글에서 정리를 해보자 !