[CSS] 선택자

선택자란?

• css 선택자(Selector)는 특정조건을 만족하는 요소(Element, 태그)에 대해 속성(Property)을 적용하기 위한 것이다.

• css 코드는 HTML style 태그안에 작성하거나 별도의 css 파일에 작성한다.

• css 선택자의 구조는 아래와 같다.

   [선택자] {
       [속성 : 값; ....]
   }

• 선택자 종류는 아래와 같다.

  • 요소 선택자 : 선택자에 대해 태그의 이름(가령, div)을 직접 사용하는 것이다.
  • 클래스 선택자 : 태그가 가지고 있는 class 속성 값으로 선택한다. 마침표를 이용하여 클래스 이름으로 선택하며 그 구조는 .클래스이름과 같다
  • 아이디 선택자 : 태그가 가지고 있는 id 속성값으로 선택한다. 샾(#)을 이용하여 아이디 값으로 선택하며 그 구조는 #아이디 와 같다.
  • 속성 선택자 : [키="값"] 꼴에서 어떠한 태그가 가지는 속성 키가 가지는 값이 값인것을 선택한다. 단, [키] 형식으로 값을 생략하게 되면 해당속성이 있는 것을 선택한다.
  • 자손 선택자 : a b 꼴에서 a의 자식 혹은 손자인 b라는 의미이다.
  • 자식 선택자 : a > b꼴에서 a의 자식인 b라는 의미이다.
  • 인접 형제 선택자 : a + b 꼴에서 a에 후행하고 인접한 형제인 b라는 뜻이다.
  • 형제 선택자 : a ~ b 꼴에서 a에 후행하고 형제인 b라는 뜻이다.(선행은 없음.)

선택자 우선순위

1) 속성값 뒤에 !important가 붙는 것.
2) 선택자의 명시가 보다 복잡한 것.
3) 아이디 선택자
4) 클래스 선택자
5) 요소 선택자
6) CSS 파일(혹은 style)에서 보다 아래에 명시된 것.

선택자 의사 클래스

• 의사 클래스(가상클래스)는 어떠한 요소의 상태에 따른 선택을 하기위해 사용한다.
• :not([의사 클래스]) : 후술하는 의사 클래스의 조건에 대한 부정이다.
• :active : 해당요소를 마우스로 누르고 있는가에 대한 여부이다.
• :checked : 체크(선택)되어 있는가에 대한 여부이다.
• :hover : 해당 요소 위에 마우스 커서가 올라와 있는거에 대한 여부이다.
• :visited : a 태그에 대해 방문한 적이 있는 링크라는 의미이다.
• :link : 링크가 걸려있다는 의미이다.