HTML・CSS Writing 2022

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

<style>
  img + p {
    color: red;
  }
</style>

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

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.