Brother Selector-Introduction to CSS [CSS3 compatible]

A sibling selector is a "+" or "~" that connects two selectors and specifies the second element that is a child of the same parent element and immediately follows the first element.

If it is "+", specify the element behind it, and if it is "~", it does not need to be adjacent and specify the element that appears behind.

I will explain only in the case of "+".

Sibling selector

  img + p {
    color: red;

  <img src = "/ images / webdesign-logo.png">
    Sibling selector

Notice that the stylesheet (CSS) is applied to the sibling element p immediately after img.

Brother selector sample

When do you actually use the sibling selector?

In a practical example, the original browser-independent checkbox, radio button Used when making.

There is a sample at the link destination.

Associated Information