CSS 선택자(Selector)

CSS 선택자(Selector)란?

선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제로 들어가보도록 하겠습니다.

 

복합선택자

일치선택자::

조건을 만족해야 선택이 됩니다.
선택자가 span.orange인 경우에는 태그가 <span>이면서 orange라는 클래스를 가지고 있어야 적용이 됩니다.

자식선택자::

자식 요소를 선택합니다. (E > F) :: 꺽쇠(>)가 선택자의 기호로 사용됩니다.
아래 코드는 ul 코드의 자식들(li) 중 orange 클래스를 갖고 있는 선택자만 선택합니다.

후손(하위) 선택자::

후손 요소를 선택합니다. ( E F ) :: '띄어쓰기'가 선택자의 기호로 사용됩니다.
div 코드 안에 있는 모든 태그들 중 orange 클래스를 갖고 있는 모든 선택자를 선택합니다.

인접 형제 선택자::

E의 다음 형제 요소 F 하나만 선택합니다. ( E + F ) :: '+' 가 선택자의 기호로 사용됩니다.
orange 클래스를 가지고 있는 태그 다음에 나타나는 li 태그를 선택합니다.

일반 형제 선택자::

E의 다음 형제 요소 F 모두 선택합니다. ( E ~ F ) :: '~' 가 선택자의 기호로 사용됩니다.
orange 클래스의 일반 형제는 딸기, 수박, 망고, 사과 등이지만 "다음"에 있는 형제들이 선택되기 때문에 망고와 사과만 선택됩니다.

 

가상클래스선택자(Pseudo-Classes Selectors)

콜론(:) 기호가 한 개 붙어있는 상태입니다. (콜론이 두 개(::)가 붙어있는 건 가상 요소 선택자입니다.

아래 언급되는 hover, active, focus는 event에 가까운 선택자입니다. 선택자로 사용하기에는 독특한 형태를 가지고 있습니다.

hover::

E에 마우스(포인터)가 올라가 있는 동안에만 E를 선택합니다. (E:hover)

active::

E를 마우스로 클릭하는 동안에만 E를 선택합니다. (E:active)

focus::

E가 포커스 된 동안에만 E를 선택합니다. (E:focus)
대화형 콘텐츠(input, img, tabindex가 부여된 요소)에서 사용이 가능합니다.

last-child::

E가 형제 요소 중 마지막 요소라면 선택합니다. (E:last-child)

nth-child(n)::

E가 형제 요소 중 n번째 요소라면 선택합니다. (n 변수를 사용시 0부터 해석합니다(Zero-Base)) (E:nth-child(n))

nth-of-type(n)

E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택합니다. (n 변수 사용시 0부터 해석)
(E:nth-of-type(n))

p 태그들 중 첫번째를 찾습니다. 태그의 이름으로 검색하기 때문에 클래스를 선택하게 되면 적용되지 않습니다.

부정선택자

E:not(s) 라고 하면, E를 선택하는데, s라는 선택자를 제외하고 선택하겠다는 의미입니다.
즉, s가 아닌 E를 선택하겠다는 의미입니다.