CSS first-child, last-child and nth-child in one Example

Thursday 13th, Sep, 2018 | #CSS #Pure CSS #CSS2 / CSS3 #HTML 5


When we need access through a specific DOM element with CSS, these selectors may be useful

:first-child

The first-child pseudo selector matches the first element directly inside its containing element

firts-child Usage


.class:first-child {
    background-color: red;
}

:last-child

The last-child pseudo selector matches the last element directly inside its containing element

last-child Usage


.class:last-child {
    background-color: green;
}

:nth-child

nth-child accepts a number, a keyword, or a formula.

nth-child Usage


.class:nth-child(2) {
    background-color: yellow;
}

All in one semaphore Example