How do >, + , ~ selectors work in CSS?

Question

Selector +

Takes the first element found after your declaration.

div + p {
  font-size: 20px;
}

<div>
</div>
<p>Este é um paragrafo</p>
<p>Este é outro paragrafo</p>

Selector ~

Adds style to all elements found after your declaration, and are not descendent from another element(children).

div ~ p {
  font-size: 20px;
}

<div>
</div>
<p>Este é um paragrafo</p>
<p>Este é outro paragrafo</p>
<div>
  <p>Este é outro paragrafo</p>
</div>

Selector >

All elements that are children of another element.

div > p {
   font-size: 20px;
 }

<div>
  <p>Este é um paragrafo</p>
  <p>Este é outro paragrafo</p>
 </div>
<p>Este é outro paragrafo</p>

My doubts:

• My understanding is in the quotes, I’m talking some nonsense?
• What can we still extract from these selectors?
• There is difference of use div p {} instead of div > p?

Obs: If you have something to implement I would be very grateful.

Answer 1

There is difference of use div p instead of div > p?

Yes, there is. The dial div p reaches all elements p which are within an element div, but this does not apply only to direct children. Any element p who is inside div will be hit. In turn, the selector div > p only reaches the elements p with a parent element div.

See the example below. While doing div p { color: red; } I’m saying that all the elements p within a div should have the color of red font. However, making div > p { color: green; } I say that those who possess as parent element the div shall be green in colour. This way, the first paragraph will be green font color, while the second will be red font color.

div p { color: red; }
div > p { color: green; }

<div>
  <p>Primeiro parágrafo</p>
  <footer>
    <p>Segundo parágrafo</p>
  </footer>
</div>

We can define, then:

• div p reaches all elements p WITHIN A div;
• div > p reaches all elements p whose PARENT ELEMENT is a div.

What can we still extract from these selectors?

The selector div + p, in turn, it will reach all elements p which are defined IMMEDIATELY after an element div. When using it with elements li, for example, it will reach all elements except the first. Very useful for defining an internal border that separates the elements.

li + li { border-top: 1px solid black; }

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The selector div ~ p, in turn, reaches all elements p which are preceded by an element div, but not necessarily immediately. That is, both elements must have the same parent element, but the p doesn’t have to happen div immediately.

Notice that the selector div + p, although it strikes the element p which is set immediately after div, will reach ALL elements p that satisfy this condition. Note in the example below where there are two elements h2 which are defined immediately after h1 and both are stylized with the color green.

h1 ~ h2 { color: red; background: cyan; }
h1 + h2 { color: green; }

<h1>Título 1.1<h1>
<h2>Título 2.1</h2>

<p>Qualquer texto aqui...</p>

<h2>Título 2.2</h2>

<h1>Título 1.2<h1>
<h2>Título 2.1</h2>

<p>Qualquer texto aqui...</p>

<h2>Título 2.2</h2>

We can then define:

• The selector div + p reaches all elements p immediately succeeding an element div;
• While the dial div ~ p reaches all elements p which are PRECEDED, not necessarily immediately, by an element div;

My understanding is in the yellow parts, I’m talking some nonsense?

Simply put, they are correct. Only a few terms that could be adjusted to define exactly the context.

• div p: all elements p WITHIN AN ELEMENT div;
• div > p: all elements p who are the direct children of an element div;
• div + p: all elements p which are positioned IMMEDIATELY after an element div;
• div ~ p: all elements p which are PRECEDED by an element div, within the same parent element;