First Letter

A propriedade ::first-letter permite estilizar a primeira letra da primeira linha de um parágrafo.

Propriedades disponíveis

• color
• backgound
• margin
• padding
• border
• font
• text

Exemplo:

A primeira letra deste parágrafo foi estilizada com a cor vermelha e seu tamanho foi aumentado.

First Line

A propriedade ::first-line permite estilizar a primeira linha de um parágrafo.

Propriedades disponíveis

• color
• backgound
• font
• text

Exemplo:

Foi adicionado um background colorido a primeira linha deste parágrafo... Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo ab reiciendis, eius dolore laboriosam voluptas! Est maxime illo voluptas deleniti eum architecto impedit, molestias odit vero sunt sapiente nemo voluptate?

Backdrop

A propriedade ::backdrop é usada para estilizar a área atrás de um elemento em tela cheia. É o espaço que fica entre o elemento e o restante da página.

Exemplo:

O video a seguir, quando visualizado em celular preenche o restante da tela com a cor violet.

Marker

A propriedade ::marker estiliza o marcador de lista de itens (bullets) li ou então a flecha de um elemento summary.

• color
• content
• white-space
• font
• animation
• transition

Exemplo:

A lista acima foi estilizada com o marker

Place-Holder

A propriedade ::placeholder permite estilizar o texto de placeholder de um campo de input.

Propriedades disponíveis

• color
• backgound
• font
• text

Exemplo:

Selection

A propriedade ::selection permite estilizar a área de texto selecionada pelo usuário.

Propriedades disponíveis

• color
• backgound-color
• text

Exemplo:

Selecione este texto para ver as alterações.

File Selector Button

A propriedade ::file-selector-button permite estilizar o botão de upload de arquivos de um campo de input.

Exemplo:

Before e After

As propriedades ::before e ::after permitem adicionar conteúdo antes ou depois de um elemento, útil para decorar elementos com pseudo-elementos.

Exemplo 1:

Neste exemplo a adição dos símbolos foi feita via CSS, através da propriedade content.

Exemplo 1 Exemplo 2 Exemplo 3

Exemplo 2:

:hover

A pseudo-classe :hover aplica estilos quando o usuário passa o cursor sobre o elemento.

:active

A pseudo-classe :active aplica estilos quando o elemento é clicado ou ativado.

:focus

As pseudo-classes :focus, :focus-within e :focus-visible são usadas para estilizar elementos com base em seu estado de foco em um documento HTML, mas com diferentes contextos de aplicação.

• :focus

  Aplica estilos a qualquer elemento que receba foco, seja pelo teclado ou pelo mouse.

• :focus-within

  Aplica estilos a um elemento contêiner quando ele ou um de seus filhos estiver focado.

• :focus-visible

  Aplica estilos apenas quando o foco é obtido por meio de interações que justificam visualmente o indicador de foco, como navegação por teclado.

Exemplo:

:target

A pseudo-classe :target estiliza o elemento que é o destino de um link com um identificador específico.

Exemplo:

:enabled e :disabled

A pseudo-classe :enabled aplica estilos a elementos habilitados, enquanto :disabled estiliza elementos desabilitados.

:link e :visited

A pseudo-classe :link estiliza links não visitados, e :visited estiliza links já visitados.

:placeholder-shown

A pseudo-classe :placeholder-shown estiliza um campo de input enquanto o placeholder está sendo exibido.

Exemplo:

:checked e :indeterminate

A pseudo-classe :checked estiliza checkboxes ou radios marcados, e :indeterminate estiliza checkboxes em estado indeterminado.

:valid e :invalid

A pseudo-classe :valid estiliza inputs válidos e :invalid estiliza inputs inválidos com base em regras de validação.

:in-range e :out-of-range

A pseudo-classe :in-range estiliza inputs que estão dentro do intervalo definido e :out-of-range estiliza inputs que estão fora desse intervalo.

:required e :optional

A pseudo-classe :required estiliza campos obrigatórios e :optional estiliza campos opcionais em formulários.

:autofill

A pseudo-classe :autofill estiliza campos de formulário que foram preenchidos automaticamente pelo navegador.

:root

A pseudo-classe :root refere-se ao elemento raiz do documento, útil para definir variáveis CSS. Equivale a tag html.

É comum de ser usando no reset CSS e para criar variáveis e valores customizados.

:nth-child e :nth-of-type

A pseudo-classe :nth-child seleciona o elemento com base na posição de todos os filhos de seu elemento pai, independentemente do tipo de tag. Pode usar padrões como odd (ímpar), even (par), números exatos como 1, 2, múltiplos de um número como 3n+1 (onde n é o número do elemento).

A pseudo-classe :nth-of-type seleciona o elemento com base na posição de seu tipo específico, ou seja, leva em consideração apenas os elementos do mesmo tipo (como div ou p).

Exemplo:

:first-of-type e :last-of-type

A pseudo-classe :first-of-type estiliza o primeiro elemento de um tipo, e :last-of-type estiliza o último.

:only-child

A pseudo-classe :only-child aplica estilos ao único filho de um elemento.

:empty

A pseudo-classe :empty estiliza elementos que não contêm filhos nem texto.

Exemplo: vai colocar borda rosa nos elementos "empty"

:is

A pseudo-classe :is() simplifica a aplicação de estilos a vários seletivos de uma só vez.

:not

A pseudo-classe :not() aplica estilos a elementos que não correspondem ao seletor especificado.

:has

A pseudo-classe :has() estiliza elementos que contêm um ou mais elementos específicos como filhos.