/* 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;
}
'CSS' 카테고리의 다른 글
웹 접근성을 고려한 콘텐츠 숨기기 (blind 처리) (0) | 2021.03.24 |
---|---|
CSS 선택자 자식 요소 개수 확인하기 (0) | 2021.03.24 |
Android Chrome 더보기 관련 스크롤 위치 이슈 (0) | 2021.03.08 |
display flex일 때 position: sticky 요소 고정 (0) | 2021.03.07 |
웹 접근성 키보드 포커스 처리 outline :focus-visible (1) | 2021.03.07 |
개의 댓글