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
(comobackground-image
) - Propriedades
border
(comoborder-color
) float
- Propriedades
font
(comofont-size
efont-weight
) - propriedades de texto (como
text-decoration
eword-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
propriedadesfont
propriedadestext
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
etransition
É 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ãobackground-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
propriedadesfont
propriedadestext
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
Quais das opções a seguir não são pseudoelementos?
::before
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
Os pseudoelementos podem ser encontrados em um arquivo HTML.