Sibling Selectors

We've recently looked at child and descendant selectors. But CSS also provides another selector based on element relationships: sibling selectors.

Adjacent Sibling Selectors

Originally, CSS2 provided us with an adjacent sibling selector, the + character.
div+p
{
    /* Style Rules */
}

So div+p would select all p tags that immediately followed a div tag.

General Sibling Selectors

CSS3 introduced the general sibling selector using the tilde character (~).
div~p
{
    /* Style Rules */
}

In the above case, div and p do not need to be adjacent siblings; they just need to be siblings. There is a catch however; p needs to be a younger sibling(comes after) than div.