Podcast CSS - 014: Pseudo-elementi
.
Se hai un articolo di contenuti e vuoi che la prima lettera sia un carattere molto più grande, come puoi farlo?
In CSS,
puoi utilizzare lo pseudo-elemento ::first-letter
per ottenere questo tipo di dettaglio di progettazione.
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 aggiuntivo senza dover aggiungere altro HTML.
Questa soluzione di esempio, utilizzando ::first-letter
,
è uno dei tanti pseudo-elementi.
Hanno una serie di ruoli,
e in questa lezione scoprirai quali pseudo-elementi sono disponibili e come puoi utilizzarli.
::before
e ::after
Entrambi i campi
::before
e
::after
Gli pseudo-elementi 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 se vuota,
ma tieni presente che qualcosa di diverso da una stringa vuota probabilmente verrà annunciato da uno screen reader.
Puoi aggiungere un'immagine url
,
che inserisce un'immagine nelle dimensioni originali,
quindi non potrai ridimensionarlo.
Puoi anche inserire un
counter
Dopo aver creato un elemento ::before
o ::after
,
puoi definire lo stile che preferisci, senza limiti.
Puoi inserire solo un elemento ::before
o ::after
in un elemento che accetterà elementi secondari
(elementi con una struttura ad albero di documenti),
pertanto elementi come <img />
, <video>
e <input>
non funzioneranno.
::first-letter
Abbiamo incontrato questo pseudo-elemento all'inizio della lezione.
Tieni presente che non tutte le proprietà CSS possono essere utilizzate durante il targeting
::first-letter
Le proprietà disponibili sono:
color
background
proprietà (ad esempiobackground-image
)border
proprietà (ad esempioborder-color
)float
- Proprietà
font
(comefont-size
efont-weight
) - proprietà del testo (ad esempio
text-decoration
eword-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
La ::first-line
pseudo-elemento ti consentirà di applicare uno stile alla prima riga di testo
solo se l'elemento con ::first-line
applicato ha un valore display
di block
,
inline-block
, list-item
, table-caption
o table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
Come lo pseudo-elemento ::first-letter
,
puoi utilizzare solo un sottoinsieme di proprietà CSS:
color
background
strutturefont
strutturetext
strutture
::backdrop
Se hai un elemento presentato
in modalità a schermo intero,
come <dialog>
o <video>
,
puoi definire lo sfondo, ovvero lo spazio tra l'elemento e il resto della pagina, mediante lo
Pseudo-elemento ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
La ::marker
pseudo-elemento consente di applicare uno stile al punto o al numero di un elemento dell'elenco o alla 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
. Puoi utilizzarlo per impostare i simboli più e meno per gli stati chiusi e vuoti di un elemento <summary>
, ad esempio.
::selection
La ::selection
ti consente di modificare l'aspetto del testo selezionato.
::selection {
background: green;
color: white;
}
Questo pseudo-elemento può essere utilizzato per applicare uno stile a tutto il testo selezionato, come illustrato nella demo precedente. Può anche essere utilizzato 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
per gli elementi del modulo,
come <input>
con un attributo placeholder
.
La ::placeholder
ti consente di modificare lo stile del testo.
input::placeholder {
color: darkcyan;
}
::placeholder
supporta solo un sottoinsieme di regole CSS:
color
background
strutturefont
strutturetext
strutture
::cue
L'ultima parte di questo tour degli pseudo-elementi è la
::cue
pseudo-elemento.
In questo modo puoi definire
i segnali WebVTT,
che sono le didascalie di un elemento <video>
.
Puoi anche inserire un selettore in un ::cue
,
che ti consente di 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 le tue conoscenze sugli pseudo-elementi
Quali dei seguenti non sono pseudo-elementi?
::marker
::pencil
::before
::first-paragraph
:active
::after
Gli pseudo-elementi si trovano in un file HTML.