Il podcast CSS - 014: Pseudo-elementi
Se hai un articolo di contenuti e vuoi che la prima lettera sia un calo molto più grande, come puoi farlo?
Nei CSS,
puoi usare lo pseudo-elemento ::first-letter
per ottenere questo tipo di dettaglio di design.
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
Uno pseudo-elemento è come l'aggiunta o il targeting di un elemento extra senza dover aggiungere altro HTML.
Questa soluzione di esempio, che utilizza ::first-letter
,
è uno dei tanti pseudo-elementi.
Hanno vari ruoli e in questa lezione
scoprirai quali pseudo-elementi sono disponibili e come utilizzarli.
::before
e ::after
Entrambi gli pseudo-elementi ::before
e ::after
creano un elemento secondario all'interno di un elemento solo se definisci una proprietà content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
può essere qualsiasi stringa, anche vuota, ma tieni presente che qualsiasi cosa diversa da una stringa vuota verrà probabilmente enunciata da uno screen reader.
Puoi aggiungere un'immagine url
che inserirà un'immagine nelle sue dimensioni originali,
quindi non potrai ridimensionarla.
Puoi anche inserire un elemento
counter
.
Dopo aver creato un elemento ::before
o ::after
,
puoi personalizzarlo come preferisci, senza limiti.
Puoi inserire solo un elemento ::before
o ::after
in un elemento che accetta gli elementi secondari
(elementi con una struttura ad albero dei documenti),
pertanto elementi come <img />
, <video>
e <input>
non funzioneranno.
::first-letter
Abbiamo incontrato questo pseudo-elemento all'inizio della lezione.
È importante tenere presente che non tutte le proprietà CSS possono essere utilizzate per il targeting di ::first-letter
.
Le proprietà disponibili sono:
color
- Proprietà
background
(comebackground-image
) - Proprietà
border
(comeborder-color
) float
- Proprietà di
font
(comefont-size
efont-weight
) - proprietà di testo (come
text-decoration
eword-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
Lo pseudo-elemento ::first-line
ti permette di definire lo stile della prima riga di testo solo se l'elemento a cui è applicato ::first-line
ha un valore display
pari a block
, inline-block
, list-item
, table-caption
o table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
Come per lo pseudo-elemento ::first-letter
,
puoi utilizzare solo un sottoinsieme di proprietà CSS:
color
background
strutturefont
strutturetext
strutture
::backdrop
Se un elemento viene presentato in modalità a schermo intero, ad esempio <dialog>
o <video>
, puoi definire lo sfondo, ovvero lo spazio tra l'elemento e il resto della pagina, con lo pseudo-elemento ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
Lo pseudo elemento ::marker
consente di definire il punto elenco o il numero di un elemento dell'elenco o la freccia di un 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 */
}
Per ::marker
è supportato solo un piccolo sottoinsieme di proprietà CSS:
color
content
white-space
font
strutture- Proprietà
animation
etransition
Puoi modificare il simbolo dell'indicatore utilizzando la proprietà content
. Ad esempio, puoi utilizzarlo per impostare i simboli più e meno per gli stati chiuso e vuoto di un elemento <summary>
.
::selection
Lo pseudo-elemento ::selection
ti consente di definire l'aspetto del testo selezionato.
::selection {
background: green;
color: white;
}
Questo pseudo-elemento può essere utilizzato per definire tutto il testo selezionato come nella demo sopra. Può essere utilizzato anche in combinazione con altri selettori per uno stile di selezione più specifico.
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
Come per altri pseudo-elementi, è consentito solo un sottoinsieme di proprietà CSS:
color
background-color
ma nonbackground-image
text
strutture
::placeholder
Puoi aggiungere un suggerimento di supporto agli elementi del modulo,
ad esempio <input>
con un attributo placeholder
.
Lo pseudo-elemento ::placeholder
ti consente di applicare uno stile al testo.
input::placeholder {
color: darkcyan;
}
L'istruzione ::placeholder
supporta solo un sottoinsieme di regole CSS:
color
background
strutturefont
strutturetext
strutture
::cue
L'ultimo di questo tour degli pseudo-elementi è lo pseudo elemento ::cue
.
Ciò ti consente di applicare uno stile ai segnali WebVTT,
che sono le didascalie di un elemento <video>
.
Puoi anche passare un selettore in un elemento ::cue
,
per applicare uno stile a elementi specifici all'interno di una didascalia.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
Verifica le tue conoscenze
Verifica la tua conoscenza degli pseudo-elementi
Quali dei seguenti non sono pseudo-elementi?
::before
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
Gli pseudo-elementi sono disponibili in un file HTML.