nth-child, nth-of-type selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */
.box:nth-child(7n){
    font-size:14px;
}
/* 22번 부터 이후 모든 box 폰트색 변경 */
.box:nth-child(n+22) {
    font-size:14px;
}
/* 1번째 부터 4번째 까지 box 배경색 변경 */
.box:nth-child(-n+5) {
   font-size:14px;
}
.box:nth-of-type(-n+6){
    font-size:14px;
}
/* 16번째 부터 19번째 까지 box 배경색 변경 */
.box:nth-child(n+16):nth-child(-n+19) {
    font-size:14px;
}
/* 맨 뒤에서 부터 3번째 */
.box:nth-last-child(3) {
    font-size:14px;
}
/*
    nth-last-child(n)는  마지막에서부터 순서를 계산
    .box:nth-child(odd){color: red;} 홀수
    .box:nth-child(even){color: red;} 짝수
    
    -child는 n의 값이 1부터 들어가고, -of type은 n의 값이 0부터 시작 됨.
*/
cs


'Tech > CSS' 카테고리의 다른 글

Flexbox  (0) 2021.02.16
부모의 높이가 0일 때, 높이를 잡는 방법  (0) 2018.09.05
Reset CSS  (0) 2018.07.09