Pseudoelementos

Podcast do CSS - 014: pseudoelementos

Se você tiver uma matéria e quiser que a primeira letra seja muito maior, como conseguir isso?

No CSS, use o pseudoelemento ::first-letter para criar esse tipo de detalhe de design.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Um pseudoelemento é como adicionar ou segmentar um elemento extra sem precisar adicionar mais HTML. Neste exemplo de solução, usando ::first-letter, é um dos vários pseudoelementos. Eles têm diversas funções, Nesta lição, você vai aprender quais pseudoelementos estão disponíveis e como usá-los.

::before e ::after

Tanto o ::before e ::after Os pseudoelementos criam um elemento filho dentro de um elemento somente se você definir uma propriedade content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

O content pode ser qualquer string mesmo que vazio, mas lembre-se de que qualquer coisa além de uma string vazia provavelmente será anunciada por um leitor de tela. Você pode adicionar uma imagem url, que insere uma imagem nas dimensões originais, então ela não poderá ser redimensionada. Você também pode inserir um counter

Assim que um elemento ::before ou ::after for criado, você pode estilizá-lo como quiser sem limites. Só é possível inserir um elemento ::before ou ::after em um elemento que aceite elementos filhos. (elementos com uma árvore do documento), por isso, elementos como <img />, <video> e <input> não vão funcionar.

::first-letter

Encontramos esse pseudoelemento no início da aula. Nem todas as propriedades CSS podem ser usadas na segmentação ::first-letter As propriedades disponíveis são:

• color
• Propriedades background (como background-image)
• Propriedades border (como border-color)
• float
• Propriedades font (como font-size e font-weight)
• propriedades de texto (como text-decoration e word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

O ::first-line pseudoelemento permite estilizar a primeira linha do texto somente se o elemento com ::first-line aplicado tiver um valor display de block. inline-block, list-item, table-caption ou table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Como o pseudoelemento ::first-letter, há apenas um subconjunto de propriedades CSS que você pode usar:

• color
• background propriedades
• font propriedades
• text propriedades

::backdrop

Se você tiver um elemento apresentado no modo de tela cheia, como um <dialog> ou um <video>, você pode estilizar o pano de fundo, o espaço entre o elemento e o resto da página, com o Pseudoelemento ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

O ::marker É possível estilizar o marcador ou o número de um item da lista ou a seta de um elemento <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Apenas um pequeno subconjunto de propriedades CSS é compatível com ::marker:

• color
• content
• white-space
• font propriedades
• Propriedades animation e transition

É possível mudar o símbolo do marcador usando a propriedade content. Você pode usar isso para definir um símbolo de mais e de menos para os estados fechado e vazio de um elemento <summary>, por exemplo.

::selection

O ::selection pseudoelemento permite estilizar a aparência do texto selecionado.

::selection {
  background: green;
  color: white;
}

Esse pseudoelemento pode ser usado para definir o estilo de todo o texto selecionado, como na demonstração acima. Ele também pode ser usado com outros seletores para criar um estilo de seleção mais específico.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Assim como outros pseudoelementos, somente um subconjunto de propriedades CSS é permitido:

• color
• background-color, mas não background-image
• text propriedades

::placeholder

Você pode adicionar uma dica auxiliar aos elementos de formulário, como <input> com um atributo placeholder. O ::placeholder pseudoelemento permite estilizar esse texto.

input::placeholder {
  color: darkcyan;
}

O ::placeholder só é compatível com um subconjunto de regras CSS:

• color
• background propriedades
• font propriedades
• text propriedades

::cue

Por último neste tour pelos pseudoelementos, Pseudoelemento ::cue. Isso permite que você defina o estilo das dicas WebVTT, que são as legendas de um elemento <video>.

Também é possível transmitir um seletor para uma ::cue. que permite estilizar elementos específicos dentro de uma legenda.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Teste seu conhecimento

Teste seu conhecimento sobre pseudoelementos