I have this code to select my first, second and third li tag, but i was asking myself if it was possible to write this code shorter. I usually don't use the child() selector so I don't know much about it.
ul > :first-child{
margin-right: 50px;
}
ul > :first-child + li{
margin-right: 50px;
}
ul > :first-child + li + li{
margin-right: 50px;
}
Chain two :nth-child()
pseudoclasses to match a range of adjacent elements:
li:nth-child(n+2):nth-child(-n+3) {
margin-right: 50px;
}
this will select both the second and the third li
acting like the logical and
operator.
Visual result of the effect of these psuedoclasses chained:
For second child you can use
li:nth-child(2){}
and for third child use
li:nth-child(3){}
All the answers are correct. Summed up, your code would look like:
ul > li:first-child {
margin-right: 50px;
}
ul > li:nth-child(2) {
margin-right: 50px;
}
ul > li:nth-child(3) {
margin-right: 50px;
}
CSS has a :nth-child
selector just for that. You can do something like this :
ul > li:nth-child(3){ ... }
Read more about this at here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.