Pseudo-elementi

The CSS Podcast - 014: Pseudo-elements

Se hai un articolo di contenuti e vuoi che la prima lettera sia molto più grande, come puoi farlo?

In CSS, puoi utilizzare l'elemento pseudo ::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;
}

Un pseudo-elemento è come aggiungere o scegliere come target un elemento aggiuntivo senza dover aggiungere altro codice HTML. Questa soluzione di esempio, che utilizza ::first-letter, è uno dei molti pseudo-elementi. Hanno una serie di ruoli e in questa lezione scoprirai quali pseudo-elementi sono disponibili e come puoi utilizzarli.

::before e ::after

Sia gli pseudo-elementi ::before sia quelli ::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 annunciata da uno screen reader. Puoi aggiungere un'immagine url, che verrà inserita con le sue dimensioni originali, quindi non potrai ridimensionarla. Puoi anche inserire un counter.

Termine chiave: puoi creare un contatore denominato e poi incrementarlo in base alla sua posizione nel flusso del documento. Esistono diversi contesti in cui possono essere davvero utili, ad esempio per numerare automaticamente un riassunto.

Una volta creato un elemento ::before o ::after, puoi applicargli lo stile che preferisci senza limiti. Puoi inserire un elemento ::before o ::after solo in un elemento che accetti elementi secondari (elementi con un albero del documento), quindi elementi come <img />, <video> e <input> non funzioneranno.

: input[type="checkbox"] è un'eccezione. È consentito avere elementi secondari pseudo-elementi.

::first-letter

Abbiamo incontrato questo pseudo-elemento all'inizio della lezione. Tieni presente che non tutte le proprietà CSS possono essere utilizzate per il targeting ::first-letter. Le proprietà disponibili sono:

• color
• Proprietà background (ad esempio background-image)
• Proprietà border (ad esempio border-color)
• float
• Proprietà font (ad esempio font-size e font-weight)
• proprietà di testo (ad esempio text-decoration e word-spacing)

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

Nota: puoi utilizzare :first-letter solo nei contenitori di blocco. Pertanto, non funzionerà se provi ad aggiungerlo a un elemento che ha display: inline.

::first-line

L'elemento pseudo ::first-line consente di applicare uno stile alla 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 strutture
• font strutture
• text strutture

::backdrop

Se hai un elemento presentato in modalità a schermo intero, come un <dialog> o un <video>, puoi applicare uno stile allo sfondo, ovvero lo spazio tra l'elemento e il resto della pagina, con l'pseudoelemento ::backdrop:

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

::marker

L'elemento pseudo ::marker consente di applicare uno stile al punto elenco 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 e transition

Puoi modificare il simbolo dell'indicatore utilizzando la proprietà content. Puoi utilizzarlo per impostare un simbolo più e meno per gli stati chiuso e vuoto di un elemento <summary>, ad esempio.

::selection

L'elemento pseudo ::selection consente di applicare uno stile all'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 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 gli altri pseudo-elementi, è consentito solo un sottoinsieme di proprietà CSS:

• color
• background-color, ma non background-image
• text strutture

::placeholder

Browser Support

• 57
• 79
• 51
• 10.1

Source

Puoi aggiungere un suggerimento agli elementi del modulo, come <input> con un attributo placeholder. L'elemento pseudo ::placeholder ti consente di applicare uno stile al testo.

input::placeholder {
  color: darkcyan;
}

::placeholder supporta solo un sottoinsieme di regole CSS:

• color
• background strutture
• font strutture
• text strutture

Nota: un placeholder non è <label> e non deve essere utilizzato al posto di un <label>. Gli elementi del modulo devono essere etichettati, altrimenti non saranno accessibili.

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

Ultimo di questo tour degli pseudo-elementi è lo pseudo-elemento ::cue. In questo modo puoi applicare uno stile ai cue WebVTT, ovvero i sottotitoli codificati di un elemento <video>.

Puoi anche passare un selettore a 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;
}

Verificare di aver compreso

Metti alla prova le tue conoscenze sugli pseudo-elementi

Quali dei seguenti non sono pseudo-elementi?

::before

Non dimenticare di aggiungere content: '';.

::first-paragraph

Questo non esiste in CSS.

::after

Non dimenticare di aggiungere content: '';.

::marker

Si tratta dell'elemento punto elenco quando utilizzi un elemento elenco o un tipo di visualizzazione.

::pencil

Questo non esiste in CSS.

:active

Si tratta di un'pseudo-classe, non di un pseudo-elemento.

Gli pseudo-elementi si trovano in un file HTML.

Vero

Sebbene DevTools possa mostrare gli pseudo-elementi nel riquadro Elementi, questi non sono presenti nel codice HTML, in quanto sono di proprietà del browser.

Falso

Possono essere scelti come target tramite CSS, ma non verranno trovati nel codice HTML.