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

Question

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

Navigation

#1 by (8 votes)

6

Selector +

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

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

Get the first element found after your declaration.

Selector ~

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

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

Add style to all elements found after your declaration, and are not descendants of other elements (children).

Selector >

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

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

All elements that are children of another element.

My questions:

My understanding is in the yellow parts, I'm talking about some silly?
What can still be extracted from these selectors?
Is there a difference in using div p {} instead of div > p ?

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

css css-seletores

asked by anonymous 04.04.2017 / 15:09

1 answer

What is an extensible language? Spring MVC integration and ratchet

score 8 · Accepted Answer

Is there a difference in using div p instead of div > p ?

Yes, there is. The div p selector reaches all p elements that are within a div element, but this does not apply only to direct children. Any p element within div will be reached. In turn, the div > p selector only reaches the p elements that have a div element as the parent element.

See the example below. When I make div p { color: red; } I'm saying that all elements p within a div must have the red font color. However, by doing div > p { color: green; } I say that those who have as their parent the div must have the green font color. In this way, the first paragraph will be green font color, while the second paragraph 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 then define:

div p reaches all elements p WITH div ;
div > p reaches all elements p whose parent element is div .

What can you still get out of these selectors?

The div + p selector, in turn, will reach all p elements that are INSTALLED a div element. When using it with elements li , for example, it will reach all but the first element. Very useful for defining an inner border that separates the elements, for example.

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

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

The div ~ p selector, in turn, reaches all p elements that are preceded by a div element, but not necessarily immediately. That is, both elements must have the same parent element, but the p element does not have to succeed div immediately.

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

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 div + p selector reaches all p elements that are INSTANTLY a div element;
While the div ~ p selector reaches all p elements that are PRECEDED, not necessarily immediately, by a div element;

My understanding is in the yellow parts, am I saying something silly?

In a simplified way, they are correct. Only a few terms that could be adjusted to define the exact context.

div p : all elements p WITHIN a div element;
div > p : all p elements that are DIRECT SONS of a div element;
div + p : all p elements that are positioned IMMEDIATELY after a div element;
div ~ p : all elements p that are PRECEDED by a div element within a same parent element;