CSS) Pseudo Selector(의사선택자)란

Pseudo Selector

 

html에서 박스를 만드는데 맨 마지막 박스만 색을 변경하고 싶다 싶으면

 

클래스나 아이디를 새로 추가하는 것보다 더 좋은 방법인 Pseudo Selector을 이용하면 되겠다

 

 

div 6개를 입력하였다.

100px의 박스

결과물

 

 

여기서 클래스나 아이디를 입력하는 방법도 있지만

 

div : 하면 많은 자동완성들이 보일것이다

 

 

 

마지막 박스만 변경하려면 last-child를 사용하면 될것이다

 

 

변경된 모습

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN

 

사용가능한 명령어들

 

 

주로 쓰이는 명령어를 소개하고 마무리하겠습니다

 

Last-child

선택자의 마지막 타겟을 변경한다

nth-child

선택자의 n번째의 타겟을 변경한다

 

응용방법:

nth-child(even) : 짝수 2, 4, 6... 를 선택함

nth-child(odd) : 홀수 1,3,5 ... 를 선택함

nth-child(2n+1) : 홀수 1,3,5...를 선택함

nth-child(2n+2):짝수 2,4,6 ...를 선택함

nth-child(3n+1)

nth-child(4n+1)

등등

짝수만 변경

first-child

선택자의 첫번째 타겟을 변경한다