CSS :first-of-type Pseudo Classe
La pseudo-classe CSS :first-of-type seleziona il primo elemento del suo tipo tra i fratelli. Scopri come usarla con esempi pratici.
La pseudo-classe CSS :first-of-type seleziona un elemento che è il primo del suo tipo tra i suoi fratelli. È equivalente a [:nth-of-type(1)](/learn-css/nth-of-type).
Il selettore conta i fratelli in base al nome del tag HTML, non per classe, attributo o ruolo. Per ogni tipo di elemento distinto all'interno di un genitore, esattamente un elemento può corrispondere a :first-of-type — il primo di quel tag. Ciò significa che un singolo genitore può avere più corrispondenze :first-of-type contemporaneamente (una per tag), il che è il comportamento che più spesso sorprende chi proviene da :first-child.
:first-of-type vs :first-child
Il selettore :first-of-type viene spesso confrontato con :first-child, ma differiscono per portata. Mentre :first-child corrisponde a un elemento solo quando è il primo figlio del suo genitore indipendentemente dal tipo, :first-of-type corrisponde al primo fratello di un dato tipo anche quando altri elementi lo precedono. Entrambi i selettori condividono la stessa specificità CSS.
Considera questo markup:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>p:first-childnon corrisponde a nulla — il primo figlio è<h2>, non un<p>.p:first-of-typecorrisponde al primo<p>("First paragraph"), perché è il primo paragrafo tra i suoi fratelli.
Usa :first-of-type quando vuoi "il primo titolo", "il primo elenco" o "il primo paragrafo" all'interno di un contenitore indipendentemente dai tag che lo precedono. Ricorri a :first-child solo quando l'elemento deve essere letteralmente il primo figlio.
Quando usarlo
Alcuni pattern pratici:
- Stilizzare il paragrafo introduttivo di un articolo senza aggiungere una classe al markup.
- Rimuovere il margine superiore o il bordo dal primo elemento di un componente ripetuto (ad es. il primo
<figure>in una galleria). - Abbinarlo a
:last-of-typeper eliminare i bordi esterni di uno stack, oppure a:nth-of-type()quando hai bisogno di una posizione diversa dalla prima.
Se un genitore contiene un solo elemento di un tipo, quell'elemento è sia il suo :first-of-type che il suo :only-of-type.
A partire da Selectors Level 4, l'elemento selezionato non richiede strettamente un nodo genitore nel DOM per corrispondere.
Versione
Sintassi
Sintassi CSS :first-of-type
:first-of-type {
css declarations;
}Esempio del selettore :first-of-type:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Esempio del selettore :first-of-type con il tag <article>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
font-size: 22px;
color: #777777;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<h2>This is a title.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
</article>
</body>
</html>Esempio del selettore :first-of-type con alcuni tag HTML:
Qui article:first-of-type corrisponde solo al primo <article>, quindi il suo sfondo scuro non viene applicato al secondo. Il selettore ha portata per genitore e per tag, il che lo rende ideale per stilizzare la prima istanza di un blocco ripetuto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
}
article:first-of-type {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<p>This is a first element!</p>
<p>This <em>nested 'em' is first</em>!</p>
<p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
<p>This <span>nested 'span' gets styled</span>!</p>
<q>This is a 'q' element!</q>
<p>This is a last element.</p>
</article>
<article>
<p>This is a second article.</p>
</article>
</body>
</html>Compatibilità con i browser
| Browser | Versione |
|---|---|
| Chrome | 1.0 |
| Firefox | 1.0 |
| Safari | 1.0 |
| Edge | 12.0 |
| Opera | 7.0 |
| IE | 9.0 |