본문 바로가기

퍼블리싱/HTML | CSS | Javascript

nth-child (n번째 부터 n번째 까지 css적용)

/* 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