HTML/CSS

[CSS] 선택자 :nth-child() n번째 부터 n번째 까지

최고관리자
2021.08.23 13:28 1,951 0

본문

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




출처 : https://hohoya33.tistory.com/99

댓글목록 0

등록된 댓글이 없습니다.