diff options
Diffstat (limited to 'files/fr/glossary/css_selector')
-rw-r--r-- | files/fr/glossary/css_selector/index.md | 103 |
1 files changed, 52 insertions, 51 deletions
diff --git a/files/fr/glossary/css_selector/index.md b/files/fr/glossary/css_selector/index.md index b5cd5760da..e7c3376392 100644 --- a/files/fr/glossary/css_selector/index.md +++ b/files/fr/glossary/css_selector/index.md @@ -11,12 +11,14 @@ tags: translation_of: Glossary/CSS_Selector original_slug: Glossaire/Sélecteur_CSS --- -<p>Un <strong>sélecteur CSS </strong> est la partie de la règle CSS qui désigne les éléments d'un document concernés par la règle. Les éléments correspondants auront le style spécifié par la règle qui leur est appliqué.</p> +Un **sélecteur CSS** est la partie de la règle CSS qui désigne les éléments d'un document concernés par la règle. Les éléments correspondants auront le style spécifié par la règle qui leur est appliqué. -<h2>Exemple</h2> -<p>Considérez ce code CSS :</p> +## Exemple -<pre class="brush: css">p { +Considérez ce code CSS : + +```css +p { color: green; } @@ -30,58 +32,57 @@ div.warning { #customized { font: 16px Lucida Grande, Arial, Helvetica, sans-serif; -}</pre> +} +``` -<p>Les sélecteurs sont ici <code>"p"</code> (qui applique la couleur verte au texte de tout élément {{HTMLElement ("p")}}), <code>"div.warning"</code> (qui fait que tout élément {{HTMLElement ("div")}} appartenant à la {{Glossary ("Class", "classe CSS")}} <code>"warning"</code> ressemble à une boîte d'avertissement) et <code>"#customized"</code>, qui définit la police de base de l'élément avec l'ID <code>"customized"</code> à 16 -pixel Lucida Grande ou l'une des polices de secours.</p> +Les sélecteurs sont ici `"p"` (qui applique la couleur verte au texte de tout élément {{HTMLElement ("p")}}), `"div.warning"` (qui fait que tout élément {{HTMLElement ("div")}} appartenant à la {{Glossary ("Class", "classe CSS")}} `"warning"` ressemble à une boîte d'avertissement) et `"#customized"`, qui définit la police de base de l'élément avec l'ID `"customized"` à 16 -pixel Lucida Grande ou l'une des polices de secours. -<p>Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :</p> +Nous pouvons ensuite appliquer ce CSS à du HTML, tel que : -<pre class="brush: html"><p>This is happy text.</p> +```html +<p>This is happy text.</p> -<div class="warning"> +<div class="warning"> Be careful! There are wizards present, and they are quick to anger! -</div> +</div> -<div id="customized"> - <p>This is happy text.</p> +<div id="customized"> + <p>This is happy text.</p> - <div class="warning"> + <div class="warning"> Be careful! There are wizards present, and they are quick to anger! - </div> -</div></pre> - -<p>Le contenu de la page résultant ressemble à ceci:</p> - -<p>{{EmbedLiveSample("Exemple", 640, 210)}}</p> - -<h2 id="Pour_approfondir">Pour approfondir</h2> - -<h3 id="Culture_générale">Culture générale</h3> - -<ul> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">Apprendre sur les sélecteurs CSS</a> dans notre introduction à CSS.</li> - <li>Sélecteurs de base - <ul> - <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type">Sélecteurs de type</a><code> elementname</code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteurs de classe</a> <code>.classname</code></li> - <li><a href="/fr/docs/Web/CSS/Reference/Sélecteurs_d'ID">Sélecteurs d'ID</a> <code>#idname</code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteurs universels</a><code> * ns|* *|*</code></li> - <li><a href="/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut">Sélecteurs d'attribut</a><code> [attr=value]</code></li> - <li><code><a href="/fr/docs/Web/CSS/Pseudo-classes">Sélecteurs d'état</a></code> <code>a:active, a:visited</code></li> - </ul> - </li> - <li>Combinaisons - <ul> - <li><a href="/fr/docs/Web/CSS/Adjacent_sibling_selectors">Sélecteurs de frère adjacent</a> <code>A + B</code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteurs de voisins généraux</a> <code>A ~ B</code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteurs d'enfant</a> <code>A > B</code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteurs descendants</a> <code>A B</code></li> - </ul> - </li> - <li><a href="/fr/docs/Web/CSS/Pseudo-éléments">Pseudo-éléments</a></li> - <li><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></li> -</ul> - -<h3 id="Référence_technique">Référence technique</h3> - -<p>{{SpecName("CSS3 Selectors")}}</p> + </div> +</div> +``` + +Le contenu de la page résultant ressemble à ceci: + +{{EmbedLiveSample("Exemple", 640, 210)}} + +## Pour approfondir + +### Culture générale + +- [Apprendre sur les sélecteurs CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) dans notre introduction à CSS. +- Sélecteurs de base + + - [Sélecteurs de type](/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type)` elementname` + - [Sélecteurs de classe](/fr/docs/Web/CSS/Sélecteurs_de_classe) `.classname` + - [Sélecteurs d'ID](/fr/docs/Web/CSS/Reference/Sélecteurs_d'ID) `#idname` + - [Sélecteurs universels](/fr/docs/Web/CSS/Sélecteurs_universels)` * ns|* *|*` + - [Sélecteurs d'attribut](/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut)` [attr=value]` + - [`Sélecteurs d'état`](/fr/docs/Web/CSS/Pseudo-classes) `a:active, a:visited` + +- Combinaisons + + - [Sélecteurs de frère adjacent](/fr/docs/Web/CSS/Adjacent_sibling_selectors) `A + B` + - [Sélecteurs de voisins généraux](/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux) `A ~ B` + - [Sélecteurs d'enfant](/fr/docs/Web/CSS/Sélecteurs_enfant) `A > B` + - [Sélecteurs descendants](/fr/docs/Web/CSS/Sélecteurs_descendant) `A B` + +- [Pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments) +- [Pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) + +### Référence technique + +{{SpecName("CSS3 Selectors")}} |