Diferença entre pseudo-classes (dois pontos :) e pseudo-elementos (quatro pontos :: ) em CSS

watch_later terça-feira, janeiro 31, 2017

Pseudo-classes são usadas para selecionar elementos que não podem ser expressados de outra forma a não ser usando atributos como: `id`'s, `classes` (ou qualquer outro tipo de informação disponível através do DOM). Por exemplo: `:first-child`, `:last-child`, `:lang()` e `:not()`.

```
table tr:first-child td { background-color: #ccc;}
table tr:nth-child(2n) td { background-color: #fff;}
:not(table) { color: #ff0000;}
```


Pseudo-elementos são elementos "imaginários" (ou elementos virtuais se preferires) no qual podemos aplicar estilos relativamente como parte de outros elementos reais, porém estes elementos imaginários não fazem parte do DOM. Por exemplo, fragmentos de conteúdo, tais como `::first-line` e `::first-letter` ou conteúdo virtualmente gerado como - `::before` e `::after`.

```
p::first-letter { color: green;}
p::before { content: "Leia isto: ";}
p::after { content: url('../imagens/icon.png');}
```

O sinal `::` foi introduzido no documento atual, a fim de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Os user agents devem também aceitar o sinal de apenas dois pontos `:` para compatibilidade com folhas de estilo já existentes e pseudo-elementos introduzidos no CSS 1 e 2 (ou seja: `:first-line`, `:first-letter`, `:before` e `:after`). Esta compatibilidade não é permitida para novos pseudo-elementos introduzidos no presente.

Fontes e referências: fonte, pseudo-classes, pseudo-elements, selectors.
duplo, dois, pontos, pseudo, classe, elemento, class, element, :before, :after, a:link, a:visited, a:hover, a:active, ::first-line, ::first-line, ::selection, :not(p), simplesmente, explicado