Définition de la CSS :only-child.
La pseudo-classe CSS :only-child
permet de cibler tous les enfants qui sont le seul élément dans leur élément parent, afin de lui assigner des propriétés CSS.
:only-child
::only-child{
/* Propriétés CSS assignées à l'enfant qui est le seul élément dans son parent */
}
identifiant :only-child{
/* Propriétés CSS assignées à l'enfant qui est le seul élément dans son parent et le parent a comme parent direct ou indirect "identifiant" */
}
identifiant strong:only-child{
/* Propriétés CSS assignées a l'enfant de type balise STRONG qui est le seul élément dans son parent et le parent a comme parent direct ou indirect "identifiant" */
}
Si vous mettez un sélecteur accolé et devant ":" de la pseudo-classe :only-child
CSS, alors seul les fils correspondant à la règle de ce sélecteur seront pris en compte.
Il est possible de remplacer :only-child
en utilisant d'autres pseudo-classes Css.
Exemple de code :only-child
CSS
Conditions d'application de la CSS :only-child.
La pseudo-classes de feuille de style :only-child
CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE
.
La pseudo-classes CSS :only-child
doit être déclarée dans une balise HTML ou XHTML STYLE
.
Problème d'interprétation de :only-child en Css.
La pseudo-classes de feuille de style :only-child
CSS n'est prise en compte qu'a partir de la version d'Internet Explorer 9+, Safari 1.5+, Chrome 2+ , Opera 9.5+ et Firefox 1.5+.
Règles de syntaxes CSS pour :only-child.
Comprendre l'écriture du sélécteur Css :only-child
La pseudo-classe CSS :only-child
s'applique au fils qui est le seul enfant, de tous les éléments HTML ou XHTML. Vous pouvez donc si nécessaire mettre un sélecteur devant pour conditionner la sélection du au fils qui est le seul enfant, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à :only-child
.
Pour schématiser, il faut imaginer que par défaut la pseudo-classe CSS :only-child
s'écrit *:only-child
. "*" représente la condition soit "n'importe quel élément" (sélectionne tous les fils qui sont le seul enfant sans distinction).
Donc pour conditionner plus précisément la sélection, il faut juste remplacer "*" par un autre sélecteur qui vous permettra de distinguer les fils qui sont le seul enfant que vous voulez sélectionner.
Ce sélecteur doit être unique (classe, id, balise ou pseudo-classe) ou multiple à condition de ne pas contenir d'espace entre chaque sélecteur sinon on passe dans la cas d'un chemin de sélection pour sélectionner le parent (vous comprendrez mieux avec les exemples qui suivent).
b:only-child{
/* Propriétés CSS assignées à l'ensemble des fils qui sont le seul enfant de type balise B, de n'importe quel élément */
}
.regle:only-child{
/* Propriétés CSS assignées à l'ensemble des fils qui sont le seul enfant de classe "regle", de n'importe quel élément */
}
:checked:disabled:only-child{
/* Propriétés CSS assignées à l'ensemble des fils qui sont le seul enfant qui corresponde à la règle :checked et :disabled, de n'importe quel élément */
}
Maintenant vous pouvez être plus précis dans pour ciblé l'élément parent quand lequel vous voulez sélectionner les fils qui sont le seul enfant en mettant un chemin de sélection devant :
.identifant b:only-child{
/* Propriétés CSS assignées à l'ensemble des fils qui sont le seul enfant de type balise B, dont le parent direct ou indirect la classe "identifant" */
}
.identifant .regle:only-child{
/* Propriétés CSS assignées à l'ensemble des fils qui sont le seul enfant de classe "regle", dont le parent direct ou indirect la classe "identifant" */
}
.identifant :checked:disabled:only-child{
/* Propriétés CSS assignées à l'ensemble des fils qui sont le seul enfant qui corresponde à la règle :checked et :disabled, dont le parent direct ou indirect a la classe "identifant" */
}
Les boites anonymes et le sélécteur Css :only-child
Attention : Les boites anonymes n'apparaissent pas dans l'arbre du document, c'est pourquoi elles ne sont pas prises en compte au moment de la mise en forme des enfants.
Info complémentaire sur le sélécteur Css :only-child
Attention, la pseudo-classe CSS ":only-child
" a une écriture un peu spéciale, "only-child
" est toujours précédée de ":".
La pseudo-classe CSS :only-child
ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE
" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "STYLE
" de votre page :
<STYLE>
span:only-child{}
</STYLE>
La pseudo-classe CSS :only-child
peut être remplacée par les pseudo-classes CSS :first-child
et :last-child
cumulées ou par les pseudo-classes CSS :nth-last-child()
et :nth-child()
cumulées.
:only-child{}
//Identique à
:first-child:last-child{}
//Identique à
:nth-child(1):nth-last-child(1){}
Compatibilités navigateurs du sélecteur :only-child
- Détails des versions de la CSS :only-child
- Sélecteur
:only-child
est compatible avec CSS3 et plus.
Votre avis sur la définition :only-child en CSS
Votez pour la définition CSS :only-child
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 5 / 5 - 1
vote
Cliquez sur une étoile pour voter.