CSS/learned_it_today
nth-child Pseudo Selector
윰윰로그
2020. 7. 1. 18:57
1. li:first-child
li:last-child
첫 번째와 마지막 아이템을 선택하는 방법
li:first-child{
background-color:#f48fb1;
}
li:last-child{
background-color:#f36339c;
}
2. Position 5
특정 위치의 아이템 선택
li:nth-child(5){
background-color:#ce93d8;
}
3. 매 3, 4, 5...번째 아이템 선택
li:nth-child(3n){
background-color:#b399ddb;
}
li:nth-child(4n){}
li:nth-child(5n){}
4. 7번째 아이템부터 매 3번째 아이템 선택
li:nth-child(3n+7){
background-color:#a5d6a7;
}
5. 짝수번째, 홀수번째
li:nth-child(even){
background-color:#ef9a9a;
}
li:nth-child(odd){
background-color:#e6ee9c;
}