From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/glossary/css_selector/index.html | 85 +++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 files/fr/glossary/css_selector/index.html (limited to 'files/fr/glossary/css_selector') diff --git a/files/fr/glossary/css_selector/index.html b/files/fr/glossary/css_selector/index.html new file mode 100644 index 0000000000..ef01f56000 --- /dev/null +++ b/files/fr/glossary/css_selector/index.html @@ -0,0 +1,85 @@ +--- +title: Sélecteur CSS +slug: Glossaire/Sélecteur_CSS +tags: + - CSS + - Glossaire + - HTML + - Programmation + - Sélecteur + - Sélecteur CSS +translation_of: Glossary/CSS_Selector +--- +

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é.

+ +

Considérez ce code CSS :

+ +
p {
+  color: green;
+}
+
+div.warning {
+  width: 100%;
+  border: 2px solid yellow;
+  color: white;
+  background-color: darkred;
+  padding:  0.8em 0.8em 0.6em;
+}
+
+#customized {
+  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
+}
+ +

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.

+ +

Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :

+ +
<p>This is happy text.</p>
+
+<div class="warning">
+  Be careful! There are wizards present, and they are quick to anger!
+</div>
+
+<div id="customized">
+  <p>This is happy text.</p>
+
+  <div class="warning">
+    Be careful! There are wizards present, and they are quick to anger!
+  </div>
+</div>
+ +

Le contenu de la page résultant ressemble à ceci:

+ +

{{EmbedLiveSample("glossary-selector-details", 640, 210)}}

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ +

{{SpecName("CSS3 Selectors")}}

-- cgit v1.2.3-54-g00ecf