/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */
선택자:nth-child(7n){
background: red;
}
/* 22번 부터 이후 모든 box 폰트색 변경 */
선택자:nth-child(n+22) {
color: blue;
}
/* 1번째 부터 4번째 까지 box 배경색 변경 */
선택자:nth-child(-n+5) {
background: green;
}
/* 16번째 부터 19번째 까지 box 배경색 변경 */
선택자:nth-child(n+16):nth-child(-n+19) {
background: hotpink;
}
/* 마지막에서부터 순서를 계산 */
/* 마지막(28)에서 부터 3번째 */
선택자:nth-last-child(3) {
background: gold;
}
/*참고 :
nth-last-child(n)는 마지막에서부터 순서를 계산
선택자:nth-child(odd) { color: red; } 홀수
선택자:nth-child(even) { color: red; } 짝수*/
출처: https://verdana1012.tistory.com/entry/CSS-nthchild-n번째-부터-n번째-까지-css적용 [Verdana:티스토리]
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
카운팅 스크립트 (0) | 2023.05.12 |
---|---|
웹접근성 고려한 html, css 작성방법 (0) | 2023.05.12 |
background linear gradient 사용시 border-bottom에 하얀색 라인이 생길때 (0) | 2022.09.26 |
vanilla javascript accordion menu (0) | 2022.06.07 |
모바일 기기 접속시 모바일 페이지로 이동 스크립트 (0) | 2022.03.03 |