CSS - Selector "::"

4

In studies of CSS selectors, we have seen the :: selector at some point. But I did not find specific reference on this keyword :: isolated. That is, I just saw it being applied in selectors mostly related to pseudo-elements.

  

Example: T::first-letter

But I do not understand what it means, and I do not understand if there is any pattern that identifies a possibility of using it.

Can you help raise the reference about this?

    
asked by anonymous 29.04.2017 / 21:16

1 answer

9

This is called pseudo-elements and are available in most browsers .

CSS selectors usually refer to elements of the DOM, this pseudo selector :: refers to elements that are not differentiated 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 
    
29.04.2017 / 21:22