Enjoy Programming

pseudo selector 본문

CSS

pseudo selector

LEETAEEON 2021. 3. 25. 00:30

pseudo selector : 세부적으로 엘레멘트를 선택o selector : 세부적으로 엘레멘트를 선택

ex> class선택시 span다음에 오는 class

      처음이나 마지막에 있는 클래스만 선택하고 싶을 때 등등

 

div를 5개 만들어주고 마지막 div만 컬러를 줘보자

div:last-child{ background-color: red; }

5개의 div태그중 마지막 태그에만 다른 색상을 준다.

 span 8개 짝수번째만 색상을 다르게 줘보자

span:nth-child(even)

8개의 span태그중 짝수번째만 다른 속성을 준다.

span:nth-child(3n + 1) 의 경우 인덱스로 0 + 1부터 이므로 첫번째부터 그다음 세번째 그다음 세번째 이런 순으로 줄수 있다.

'CSS' 카테고리의 다른 글

attribute selectors  (0) 2021.03.25
combinators  (0) 2021.03.25
position 을 알아보자  (0) 2021.03.24
Flex box를 알아보자  (0) 2021.03.24
Block 요소와 Inline요소  (0) 2021.03.24