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.

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.

::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;
}

::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

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

::cue

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