Css selector hierarchy

The following example selects all < p > elements inside < div > elements:

div p {background-color: yellow;}

The following example selects all < p > elements that are immediate children of a < div > element:

div > p {background-color: yellow;}

The following example selects all < p > elements that are placed immediately after < div > elements:

div + p {background-color: yellow;}

The following example selects all < p > elements that are siblings of < div > elements: Same level with div but not div

div ~ p {background-color: yellow;}