By Kelvin Li —

CSS child selector

We use > to combine 2 selectors, like div > p (div indicates the parent element, and p is the child element)

find all descendant elements

// select all the descendants of *div*
div p {
    color: red;
}

white space to separate the parent and descendant elements.

find sibling elements

div ~ p {
    color: red;
}

find adjacent sibling element

div + p {
    color: red;
}

select the first child element

div > p:first-child {
    color: red;
}

select the Nth child element

div > p:nth-of-type(N) {
    color: red;
}

you can specify N as the which child element you wan to get, like second element, it should be div > p:nth-of-type(2)

Here are the differences for nth-child and nth-of-type
:nth-child() -> it doens't care the type of parent

:nth-of-type() -> select children of specifi parent

select the last element

div > p:last-child {
    color: red;
}