[CSS]Pseudo Selectors

Pseudo Selectors는 element를 좀 더 세부적으로 선택하게 해주는 기능이다.

 

예제를 보면 훨씬 이해가 잘 될 것이다.

 

▲ 우선 span을 몇개 만들었고 배경은 초록색으로 만들었다. 아래와 같이.

 

 

 

 

이제 여기서 나는 맨 마지막 span을 다른 색으로 하고 싶다. 이럴 때 쓸 수 있는 것이 바로 pseudo selector이다.

 

▲ pseudo selector를 사용하기 위해서는 data type 에다 중괄호가 아닌 콜론( : )을 써야한다.

 

▲ 콜론 뒤에는 많은 옵션들을 사용할 수 있다. 우리는 이중에서 마지막 span을 지정할 것이기 때문에 last-child라는 옵션을 선택했다. 출력결과는 아래와 같다.

 

▲ span들 중 마지막 span을 가리켜 지정할 수 있다.

 

 

다른 예시1)

결과)

▲ 짝수번째만 선택

 

 

 

 

다른 예시2)

결과)

▲ 홀수번째만 선택

 

 

 

 

다른 예시3)

결과)

▲ 3의 배수번째만 선택

 

 

 

 

위의 예제에서 본 옵션들은 일부분일 뿐이고 훨씬 많은 옵션이 있다.

 

 

 

정리하면, pseudo selector는 element들을 좀 더 디테일하게 선택할 때 주로 사용하는 기능이며, 문법은 콜론( : )을 사용한다는 것이다.