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