What does >, :: , +, and & css sign mean?

Question

I’m starting my internship and I don’t know the meaning of the following attitudes.

Signal from > (larger)

Because it’s used .classe-a > classe-b{}

Two-point

 .classe-a::.classe-b{}

Signal from + (more)

.classe-a + classe-b

Sign of &

&.classe-a{}

I’m gonna keep this up CSS but first I need to know what these signs are?

Answer 1

• Greater sign >: means child-direct element. Selects all children-direct element.

Example: div > span

<div>
  <span> <!-- filho direto da div -->
     DvD
     <p>DvD</p> <!-- não é filho direto da div -->
  </span>
</div>

• Colon ::: means pseudo-element (a child element).

Example: div::first-letter

Select the first letter within the div (in the case below, the "d").

<div>
   <span>
      dvd
   </span>
</div>

Your example .classe-a::.classe-b{} is incorrect. A class is not may be a pseudo-element.

Documentation of pseudo-elements in MDN.

• - Sign of +: selects the element immediately after.

Example: div + p

<div>
   dvd
</div>
<p>dvd</p> <!-- este é selecionado, pois está após a div -->
<p>dvd</p> <!-- este não é selecionado -->

• Sign &: this sign does not exist in CSS. It is used in Sass, a language for compiling CSS codes.