728x90
반응형
:nth-child(N)= 부모안에 모든 요소 중 N번째 요소
/* 3, 6, 9, 12 번째(3의배수) 배경변경 */
li:nth-child(3n){ background: red; }
/* 10번째 부터 이후 모든 리스트 컬러변경 */
li:nth-child(n+10) { color: blue; }
/* 1번째 부터 5번째 까지 배경변경 */
li:nth-child(-n+5) { background: green; }
/* 15번째 부터 20번째 까지 배경변경 */
li:nth-child(n+15):nth-child(-n+20) { background: hotpink; }
/* 끝에서 부터 3번째 */
li:nth-last-child(3) { background: gold; }
/* 홀수 */
li:nth-child(odd) { color: red; }
/* 짝수 */
li:nth-child(even) { color: red; }
A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
:first-child= 부모안에 모든 요소 중 첫번째 요소
:last-child= 부모안에 모든 요소 중 마지막 요소
A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type= 부모안에 A라는 요소 중 마지막 요소
728x90
반응형
'Frontend > CSS' 카테고리의 다른 글
css - input 태그 안에 이미지 넣기 (feat. input background 투명하게, palceholder 색깔 넣기 등등... ) (0) | 2023.07.30 |
---|---|
css - filter (0) | 2023.05.01 |
css-box shadow(animation도 적용시켜보기) (0) | 2023.04.24 |
css - 레이아웃 grid (0) | 2023.04.22 |
html - img VS css - background (0) | 2023.04.21 |