(CSS 선택자 1편) pseudo selector란?

 

html 요소를 css로 꾸며주려면 정확히 어떤 html요소를 꾸밀지 알아야 한다.

 

이렇게 html 요소를 선택하는 하는 것을 css selector(선택자)라고 한다.

 

id나 class도 선택자 중 하나다. 

 

 

 

그 외에도 combinator(결합 선택자), attribute(속성 선택자), pseudo element(의사 클래스, 의사요소)가 있다. 

 

이번 포스팅에서는 이 중에서 pseudo element(의사 클래스, 의사요소)를 다룬다.

 

id와 class는 아래 포스팅에서 다루었다.

 

id와 class의 차이점과 사용방법

 

 

 

 

pseudo element(의사 요소)란?

 

의사 클래스, 의사 요소는 특정 상태에 있는 요소를 선택하는 선택자이다.

 

의사 클래스, 의사 요소를 사용하면 세부적으로 선택이 가능해지고, 클래스가 과도하게 많아지는 것을 막을 수 있다. 

 

의사 클래스, 의사 요소의 종류는 아래와 같다. 

 

 

의사 클래스 - 순서(order)

• :first-child 첫 번째 자식
• :last-child 마지막 자식
• :nth-child(n) n번째 자식 
  • :nth-child(even) 짝수 번호째 자식
  • :nth-child(3n+1) 3의 배수+1 번호째 자식

 

 

의사 클래스 - 상태(state)

• :hover 커서가 올라와 있을 때
• :active 클릭할 때
• :focus 키보드로 선택할 때
• :visited 링크 방문한 이력이 있을 때
• :focus-within 자식들 중 하나라도 focus상태에 있을 때 부모에게 사용

 

 

의사 요소 

• ::placeholder placehoder 꾸밀 때 사용
• ::selection 드래그했을 때
• ::first-letter 앞 글자에
• ::first-line 첫 줄