diff options
Diffstat (limited to 'files/fr/web/css/_colon_only-child/index.md')
| -rw-r--r-- | files/fr/web/css/_colon_only-child/index.md | 182 |
1 files changed, 84 insertions, 98 deletions
diff --git a/files/fr/web/css/_colon_only-child/index.md b/files/fr/web/css/_colon_only-child/index.md index 0f992ae22e..9f04b643c6 100644 --- a/files/fr/web/css/_colon_only-child/index.md +++ b/files/fr/web/css/_colon_only-child/index.md @@ -1,71 +1,74 @@ --- title: ':only-child' -slug: 'Web/CSS/:only-child' +slug: Web/CSS/:only-child tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:only-child' +translation_of: Web/CSS/:only-child --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-child</code></strong> représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que <code>:first-child:last-child</code> ou <code>:nth-child(1):nth-last-child(1)</code>, mais avec une spécificité inférieure.</p> +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:only-child`** représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que `:first-child:last-child` ou `:nth-child(1):nth-last-child(1)`, mais avec une spécificité inférieure. -<pre class="brush: css no-line-numbers">/* Cible chaque élément <p> si celui-ci */ +```css +/* Cible chaque élément <p> si celui-ci */ /* est le seul élément fils de son parent */ p:only-child { background-color: lime; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.</p> -</div> +> **Note :** En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_simple">Exemple simple</h3> +### Exemple simple -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">span:only-child { +```css +span:only-child { color:red; } -</pre> +``` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div> - <span> +```html +<div> + <span> Ce span est l'unique enfant de son parent - </span> -</div> + </span> +</div> -<div> - <span> +<div> + <span> Ce span est l'un des deux enfants de son parent - </span> - <span> + </span> + <span> Ce span est l'un des deux enfants de son parent - </span> -</div> -</pre> + </span> +</div> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Exemple_simple', '100%', 150)}}</p> +{{EmbedLiveSample('Exemple_simple', '100%', 150)}} -<h3 id="Exemple_avec_une_liste">Exemple avec une liste</h3> +### Exemple avec une liste -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">li li { +```css +li li { list-style-type : disc; } @@ -73,69 +76,52 @@ li:only-child { color: #6699ff; font-style: italic; list-style-type: square; -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><ol> - <li>Premier - <ul> - <li>Ceci est l'unique élément enfant</li> - </ul> - </li> - <li>Deuxième - <ul> - <li>Cette liste a deux éléments</li> - <li>Cette liste a deux éléments</li> - </ul> - </li> - <li>Troisième - <ul> - <li>Cette liste a trois éléments</li> - <li>Cette liste a trois éléments</li> - <li>Cette liste a trois éléments</li> - </ul> - </li> -</ol> -</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.selectors.only-child")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref(":only-of-type")}}</li> - <li>{{cssxref(":first-child")}}</li> - <li>{{cssxref(":last-child")}}</li> - <li>{{cssxref(":nth-child")}}</li> -</ul> +} +``` + +#### HTML + +```html +<ol> + <li>Premier + <ul> + <li>Ceci est l'unique élément enfant</li> + </ul> + </li> + <li>Deuxième + <ul> + <li>Cette liste a deux éléments</li> + <li>Cette liste a deux éléments</li> + </ul> + </li> + <li>Troisième + <ul> + <li>Cette liste a trois éléments</li> + <li>Cette liste a trois éléments</li> + <li>Cette liste a trois éléments</li> + </ul> + </li> +</ol> +``` + +#### Résultat + +{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------- | +| {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS4 Selectors')}} | Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé. | +| {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.only-child")}} + +## Voir aussi + +- {{cssxref(":only-of-type")}} +- {{cssxref(":first-child")}} +- {{cssxref(":last-child")}} +- {{cssxref(":nth-child")}} |