Tuesday, December 16, 2014

How to access Nth child in CSS

You can use selector first-child to apply styling to only the elements that are the first children of their parents.You can select any child of an element after the first child with the pseudo-class selector nth-child; you just add the child's number in parentheses after the pseudo-class selector. For example,

p:first-child {
    font-family: cursive;
}
p:nth-child(2) {
    font-family: Tahoma;
}
p:nth-child(3) {
    color: red;
}
p:nth-child(4) {
    background-color: green;
}
p:nth-child(5) {
    font-size: 18px;
}

The element that is the child goes before :nth-child; its parent element is the element that contains it.

Popular Posts