[CSS] 선택자(Selector)

1. 전체요소 선택자 --> *{ property : value; }

2. ID 선택자 --> #name{ property : value; }

3. Class 선택자 --> .name{ property : value; }

 

4. 자손선택자 --> element1 element2 { property : value; } 

(element1에 속한 element2를 선택하는 방법)

5. 인접선택자 --> element1 + element2{ property : value; }

(element1뒤에 나오는 element2를 선택하는 방법)

6. 자식선택자 --> element1 > element2 { property : value; }

(자손선택자와 유사하나 element1 > element3 > element2의 구조에서는 element2를 선택할 수 없음)

 

7. 속성선택자(Attribute Selector) : element[attr_name="attr_value"]{ property : value; }

 

ex) a[href*="value"] : <a> 태그중 href 특성의 값이 value를 포함하는 태그를 선택

ex) a[href$=".com"] : <a> 태그중 href 특성의 값이 .com으로 끝나는 태그를 선택

 

8. 유사 클래스를 활용한 선택자 element : hover와 같이 사용

1) :link --> 링크클래스

2) :hover --> 마우스 커서가 올라가서 반응하는 클래스

3) :visited --> 링크에 접속하고 난후 변경되는 클래스

4) :active --> 활성화 되어 있는 클래스

5) :nth-child 

6) :nth-of-type

 

CSS에서 중복되는 내용은 가장 최근에 작성된(아래에 있을수록) 내용이 적용되나 같은 element를 나타내는 내용은 specificity를 적용하여 우선순위를 결정, 이때 ID selector, class selector, element 순으로 우선수위가 결정