CSS - Selector "::"

Question

In studies of CSS selectors, we have seen the selector :: in a few moments. However I did not find specific reference on this keyword :: isolated. That is, I only saw it being applied in selectors mainly related to pseudo-elements.

Example: T::first-letter

But I didn’t understand what it means, and I also didn’t understand if there is any pattern that identifies a possibility of using it.

Can help raise the reference on this?

Answer 1

That’s called pseudo-elements and are available in most browsers.

CSS selectors usually refer to DOM elements, this pseudo selector :: refers to elements that are not different in the DOM. It may be the first letter for example:

::first-letter {
  color: blue;
}

<p>Algum texto!</p>

or the first line:

::first-line {
  color: blue;
}

<p>Algum texto!<br>e a continuação</p>

or adding text that does not exist in the DOM:

p::before {
  content: 'Nota: ';
  color: red;
}

<p>Algum texto!</p>

The list is:

::after
::before
::first-letter
::first-line
::selection
::backdrop 
::placeholder 
::marker 
::spelling-error 
::grammar-error