CSS :only-child Pseudo Classe
Usa la pseudo-classe CSS :only-child per selezionare e stilizzare l'unico figlio di un genitore. Leggi e pratica con esempi.
La pseudo-classe :only-child seleziona un elemento che è il solo figlio del suo genitore — ovvero un elemento privo di qualsiasi fratello.
L'elemento viene selezionato solo se il suo genitore non contiene altri figli elemento. La pseudo-classe :only-child è funzionalmente equivalente a :first-child:last-child (essere sia il primo che l'ultimo figlio allo stesso tempo significa che non c'è nient'altro nel mezzo), e porta la stessa specificità di (0,2,0), poiché viene contata come due pseudo-classi.
Questa pagina descrive cosa seleziona :only-child, come si differenzia da selettori correlati come :only-of-type, come usarlo in layout reali e gli errori comuni in cui si incorre.
Quando usare :only-child
:only-child è più utile quando si vuole che un elemento abbia un aspetto diverso a seconda che stia da solo o si trovi insieme ad altri fratelli. Casi comuni:
- Liste con un singolo elemento. Stilizza diversamente una lista con un solo elemento (ad esempio, nascondi il punto elenco o rimuovi un separatore che ha senso solo quando ci sono più elementi).
- Layout a card o griglia. Una card singola può essere centrata o espansa, mentre due o più si dispongono in un layout a più colonne.
- Contenuto generato. Quando il markup è prodotto da un CMS o da un ciclo di template, spesso non si può sapere in anticipo quanti fratelli appariranno;
:only-childpermette al foglio di stile di reagire automaticamente.
Come si differenzia da :only-of-type
Questo è il punto di confusione più comune:
:only-child— seleziona solo quando l'elemento è il solo figlio del suo genitore, indipendentemente dal tipo di elemento. Se è presente qualsiasi altro fratello elemento, non corrisponde.:only-of-type— seleziona quando l'elemento è il solo del suo tipo tra i fratelli, anche se esistono fratelli di altri tipi.
<div>
<h2>Heading</h2>
<p>Only paragraph here</p>
</div>Nel markup sopra, il <p> non è un :only-child (anche <h2> è un figlio), ma è :only-of-type, perché è l'unico <p>.
Il contenuto testuale non conta
:only-child considera solo i fratelli elemento. Il testo semplice attorno a un elemento non impedisce la corrispondenza:
<p>Some text <strong>bold</strong> more text</p>Qui <strong> corrisponde comunque a strong:only-child, perché i nodi di testo circostanti non sono elementi. Anche gli spazi e i commenti vengono ignorati.
Versione
Sintassi
Sintassi CSS :only-child
:only-child {
css declarations;
}Esempio del selettore :only-child:
Esempio di :only-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:only-child {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<div>
<p>Lorem ipsum is simply dumnmy text.</p>
</div>
<div>
<p>Lorem ipsum is simply dummy text.</p>
<p>Lorem ipsum is simply dummy text.</p>
</div>
</body>
</html>Esempio del selettore :only-child per il tag <li>:
Esempio di :only-child con il tag li
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
list-style-type: square;
}
li:only-child {
color: blue;
list-style-type: disc;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<ol>
<li>
One element
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>
Two elements
<ul>
<li>This list has two elements.</li>
<li>This list has two elements.</li>
</ul>
</li>
<li>
Three elements
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
</body>
</html>Esempio del selettore :only-child per il tag <em>:
Esempio di :only-child con il tag em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
em:only-child {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<p>This is a <em>paragraph</em>.</p>
<p>This is a paragraph.</p>
</body>
</html>Esempio del selettore :only-child per il tag <div>:
Esempio di :only-child per il tag div
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:only-child {
color: #8ebf42;
font-weight: bold;
}
div {
display: block;
margin: 6px;
padding: 5px;
outline: 1px solid #1c87c9;
}
div div {
display: inline-block;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<div>
<div>I am an only child.</div>
</div>
<div>
<div>I am the 1st sibling.</div>
<div>I am the 2nd sibling.</div>
<div>
I am the 3rd sibling,
<div>but this is an only child.</div>
</div>
</div>
</body>
</html>Selettori correlati
:only-of-type— l'unico elemento del suo tipo tra i fratelli.:first-childe:last-child— selezionano il primo o l'ultimo figlio;:only-childè equivalente a combinarli entrambi.:nth-child()— seleziona i figli per posizione con una formula.