공부하자
(first, last, nth)-child : 순서 선택자 본문
first, last, nth - child : 특정 순서에 있는 요소를 선택할 수 있다.
first-child : 첫번째 요소 선택
last-child : 마지막 요소 선택
nth-child(순서) : 두번째, 세번째 등 원하는 순서의 요소 선택
first-of-type : 첫번째 요소 선택
last-of-type : 마지막 요소 선택
nth-of-type(숫자) : 두번째, 세번째 등 원하는 순서의 요소 선택
www.w3schools.com/cssref/sel_last-of-type.asp
CSS :last-of-type Selector
CSS :last-of-type Selector Example Specify a background color for the last
element of its parent: p:last-of-type { background: #ff0000; } Try it Yourself » Definition and Usage The :last-of-type selector matches every element that is the last child
www.w3schools.com
예시 :
| .section.box ul li:first-child {color:#f00} |
| .section.box ul li:nth-child(2) {color:#00f} /* 다른 속성들도 테스트. last-of-type */ |
| .section.box ul li:last-child > a {font-size:20px} |
| .section.box ul > * {border:1px solid #0ff;} /* *:모든 선택자 */ |
'CSS정리' 카테고리의 다른 글
| 좌우배치를 하는 다양한 방법 (float, display:table, flex) (0) | 2021.01.04 |
|---|---|
| 여러가지 단위 : %, vw, vh, em, calc (0) | 2020.12.04 |
| 인접 형제 선택자 (0) | 2020.12.03 |
| before 선택자. 엘리먼트의 스타일이 적용되기 전에 (0) | 2020.11.30 |
| after 선택자. 엘리먼트에 포함된 모든 스타일이 끝났을 때 (0) | 2020.11.30 |
Comments