반응형
특정 순서의 CSS를 변경할 때 유용한 nth-child(). 다양하게 활용이 가능하다.
3의 배수인 박스 배경 변경
.box:nth-child(3n){
background:red
}
20번째 이후 모든 박스 배경 변경
/* 22번 부터 이후 모든 box 폰트색 변경 */
.box:nth-child(n+20) {
background:red
}
1번째부터 5번째까지 박스 배경 변경
1번째부터 지정할때는 -n으로 시작하는 것 주의
.box:nth-child(-n+6) {
background:red
}
15번째부터 20번째까지 박스 배경색 변경
.box:nth-child(n+15):nth-child(-n+20) {
background:red
}
마지막에서 3번째 박스 변경
.box:nth-last-child(3) {
background:red
}
마지막부터 홀수/짝수인 박스 배경색 변경
.box:nth-child(odd) { background:red } /*홀수*/
.box:nth-child(even) { background:red } /*짝수*/
반응형
'디자인 > html·css' 카테고리의 다른 글
audio/video 태그 다운로드, 재생속도 메뉴 없애기 (0) | 2023.09.04 |
---|---|
[CSS] placeholder 글자색 변경 (0) | 2023.08.31 |
부트스트랩 모달창 검정 배경 아래로 뜰 때 해결 방법 (Bootstrap Modal) (0) | 2023.07.10 |
svg 칠하기 / 컬러 변경 (0) | 2023.04.27 |
[CSS] background-image 배경 이미지 여러개 넣기 (0) | 2023.04.27 |
웹폰트 소스, 시스템 폰트 TTF -> WOFF/WOFF2/OTF 웹폰트로 변환하기 (0) | 2023.02.15 |
absoulte인 div 가운데 정렬하는 여러가지 방법 (0) | 2023.01.02 |
[CSS] window.print() 머리글, 바닥글 없애기 (0) | 2021.12.29 |