Comparaison de révisions

Les sélecteurs

Révision 267244 :

Révision 267244 par grandoc le

Révision 212967 :

Révision 212967 par grandoc le

Titre :
Les sélecteurs
Les sélecteurs
Identifiant d'URL :
CSS/Premiers_pas/Les_sélecteurs
CSS/Premiers_pas/Les_sélecteurs
Étiquettes :
css, CSS:Premiers_pas
Contenu :

Révision 267244
Révision 212967
t7    <p>t
8      &nbsp;
9    </p>
10    <p>
11      Cette page explique comment appliquer des styles de manière
> sélective, et les priorités des différents types de sélecteurs. 
12    </p>
13    <p>
14      Vous ajouterez quelques attributs aux balises de votre docu
>ment exemple, et vous utiliserez ces attributs dans votre feuille 
> de style. 
15    </p>
16    <h3 id="Information_:_les_s.C3.A9lecteurs" name="Information_
>:_les_s.C3.A9lecteurs"> 
17      Information&nbsp;: les sélecteurs
18    </h3>
19    <p>
20      CSS a sa propre terminologie pour décrire le langage CSS. P
>récédemment dans ce tutoriel, vous avez créé une ligne dans votre 
> feuille de style comme ceci&nbsp;: 
21    </p>
22    <div style="width:30em;">
23      <pre>
24strong {color: red;}
25</pre>
26    </div>
27    <p>
28      Dans la terminologie CSS, toute cette ligne est une <em>règ
>le</em>. Cette règle commence avec <code>strong</code>, qui est u 
>n <em>sélecteur</em>. Celui-ci sélectionne les éléments dans le D 
>OM sur lesquels la règle va s'appliquer. 
29    </p>
30    <table style="border:1px solid #36b; background-color:#f4f4f4
>; padding:1em;"> 
31      <caption style="font-weight:bold; text-align:left;">
32        Plus de détails
33      </caption>
34      <tbody>
35        <tr>
36          <td>
37            La partie à l'intérieur des crochets courbes est la <
>em>déclaration</em>. 
38            <p>
39              Le mot-clé <code>color</code> est une <em>propriété
></em>, et <code>red</code> est une <em>valeur</em>. 
40            </p>
41            <p>
42              Le point virgule après la valeur de propriété sépar
>e celle-ci d'autres paires de propriétés/valeurs pour le même sél 
>ecteur. 
43            </p>
44            <p>
45              Ce tutoriel se réfère à un sélecteur comme <code>st
>rong</code> comme à un sélecteur de <em>balise</em>. La spécifica 
>tion CSS s'y réfère comme à un sélecteur de <em>type</em>. 
46            </p>
47          </td>
48        </tr>
49      </tbody>
50    </table>
51    <p>
52      <br>
53      Cette page du tutoriel donne plus de détails sur les sélect
>eurs utilisables dans les règles CSS. Outre les noms de balise, i 
>l est possible d'utiliser des valeurs d'attribut dans les sélecte 
>urs. Cela permet au règles d'être plus spécifiques. 
54    </p>
55    <p>
56      Deux attributs ont un statut spécial pour CSS. Ce sont les 
>attributs <code>class</code> et <code>id</code>. 
57    </p>
58    <p>
59      Utilisez l'attribut <code>class</code> dans une balise pour
> lui assigner une classe nommée. Vous pouvez choisir le nom qui v 
>ous convient pour cette classe. 
60    </p>
61    <p>
62      Dans votre feuille de style, entrez un point avant le nom d
>e la classe lorsque vous l'utilisez dans un sélecteur. 
63    </p>
64    <p>
65      Utilisez l'attribut <code>id</code> dans une balise pour lu
>i assigner un identifiant unique. Vous pouvez choisir le nom qui  
>vous convient pour l'identifiant. Celui-ci doit cependant être un 
>ique au sein du document. 
66    </p>
67    <p>
68      Dans votre feuille de style, entrez un signe dièse (carré) 
>avant l'identifiant lorsque vous l'utilisez dans un sélecteur. 
69    </p>
70    <table style="border:1px solid #36b; background-color:#ffe; p
>adding:1em;"> 
71      <caption style="font-weight:bold; text-align:left;">
72        Exemples
73      </caption>
74      <tbody>
75        <tr>
76          <td>
77            Cette balise HTML a à la fois un attribut <code>class
></code> et un attribut <code>id</code>&nbsp;: 
78            <div style="width: 30em;">
79              <pre>
80&lt;P class="clef" id="principale"&gt;
81</pre>
82            </div>
83            <p>
84              L'identifiant, <code>principale</code>, doit être u
>nique dans le document, mais d'autres balises dans le document pe 
>uvent avoir le même nom de classe, <code>clef</code>. 
85            </p>
86            <p>
87              Dans une feuille de style CSS, cette règle rend tou
>s les éléments de la classe <code>clef</code> verts. (Ils peuvent 
> ne pas tous être des éléments <small>P</small> .) 
88            </p>
89            <div style="width: 30em;">
90              <pre>
91.clef {color: green;}
92</pre>
93            </div>
94            <p>
95              Cette règle rend l'élément avec l'identifiant <code
>>principale</code> gras&nbsp;: 
96            </p>
97            <div style="width: 30em;">
98              <pre>
99#principale {font-weight: bolder;}
100</pre>
101            </div>
102          </td>
103        </tr>
104      </tbody>
105    </table>
106    <p>
107      Si plus d'une règle s'applique à un élément et spécifie la 
>même propriété, CSS donne la priorité à la règle ayant le sélecte 
>ur le plus spécifique. Un sélecteur id est plus spécifique qu'un  
>sélecteur de classe, qui lui-même est plus spécifique qu'un sélec 
>teur de balise. 
108    </p>
109    <table style="border:1px solid #36b; background-color:#f4f4f4
>; padding:1em;"> 
110      <caption style="font-weight:bold; text-align:left;">
111        Plus de détails
112      </caption>
113      <tbody>
114        <tr>
115          <td>
116            Vous pouvez également combiner le sélecteurs, afin de
> créer un sélecteur plus spécifique. 
117            <p>
118              Par exemple, le sélecteur <code>.clef</code> sélect
>ionne tous les éléments qui ont le nom de classe <code>clef</code 
>>. Le sélecteur <code>p.clef</code> sélectionne seulement les élé 
>ments P qui ont le nom de classe <code>clef</code>. 
119            </p>
120            <p>
121              Vous n'êtes pas limité aux deux attributs spéciaux 
><code>class</code> et <code>id</code>. Vous pouvez spécifier d'au 
>tres attributs en utilisant des crochets droits. Par exemple, le  
>sélecteur <code>{{ mediawiki.external('type=button') }}</code> sé 
>lectionne tous les éléments qui ont un attribut <code>type</code> 
> avec la valeur <code>button</code>. 
122            </p>
123            <p>
124              Une prochaine page de ce tutoriel, (<a href="/fr/CS
>S/Premiers_pas/Tableaux" title="fr/CSS/Premiers_pas/Tableaux">Tab 
>leaux</a>) a des informations sur les sélecteurs complexes basés  
>sur les relations. 
125            </p>
126            <p>
127              Pour une information complète sur les sélecteurs, c
>onsultez <a class="external" href="http://www.w3.org/TR/CSS21/sel 
>ector.html">Selectors</a> dans la spécification CSS. 
128            </p>
129          </td>
130        </tr>
131      </tbody>
132    </table>
133    <p>
134      <br>
135      Si la feuille de style a des règles conflictuelles et qui s
>ont également spécifiques, alors CSS donne la priorité à la règle 
> qui est définie plus tard dans la feuille de style. 
136    </p>
137    <p>
138      Lorsque vous avez un problème de conflit de règles, essayez
> de le résoudre en rendant une des règles plus spécifique, afin q 
>u'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez 
> de déplacer l'une des règles plus près de la fin de la feuille d 
>e style pour lui donner la priorité. 
139    </p>
140    <h3 id="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id"
> name="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id"> 
141      Action&nbsp;: utilisation des sélecteurs class et id
142    </h3>
143    <p>
144      Éditez votre fichier HTML, et dupliquez le paragraphe par c
>opier-coller. Ajoutez ensuite des attributs id et class à la prem 
>ière copie, et un autre id à la seconde copie comme montré ci-des 
>sous. Sinon, copiez et collez à nouveau l'entièreté du fichier&nb 
>sp;: 
145    </p>
146    <div style="width:48em; color:gray;">
147      <pre class="eval">
148&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
149&lt;HTML&gt;
150  &lt;HEAD&gt;
151  &lt;TITLE&gt;Document exemple&lt;/TITLE&gt;
152  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
>&lt;/strong&gt; 
153  &lt;/HEAD&gt;
154  &lt;BODY&gt;
155    &lt;P <strong style="color:black;">id="premier"</strong>&gt;
156      &lt;STRONG <strong style="color:black;">class="carotte"</st
>rong>&gt;C&lt;/STRONG&gt;ascading 
157      &lt;STRONG <strong style="color:black;">class="epinard"</st
>rong>&gt;S&lt;/STRONG&gt;tyle 
158      &lt;STRONG <strong style="color:black;">class="epinard"</st
>rong>&gt;S&lt;/STRONG&gt;heets 
159    &lt;/P&gt;
160    <strong style="color:black;">&lt;P id="second"&gt;       &lt;
>STRONG&gt;C&lt;/STRONG&gt;ascading       &lt;STRONG&gt;S&lt;/STRO 
>NG&gt;tyle       &lt;STRONG&gt;S&lt;/STRONG&gt;heets     &lt;/P&g 
>t;</strong> 
161  &lt;/BODY&gt;
162&lt;/HTML&gt;
163</pre>
164    </div>
165    <p>
166      Éditez à présent votre fichier CSS. Remplacez l'entièreté d
>e son contenu par&nbsp;: 
167    </p>
168    <div style="width:40em;">
169      <pre>
170strong {color: red;}
171.carotte {color: orange;}
172.epinard {color: green;}
173#premier {font-style: italic;}
174</pre>
175    </div>
176    <p>
177      Actualisez dans votre navigateur et voyez le résultat&nbsp;
>: 
178    </p>
179    <table style="border:2px outset #36b; padding:1em;">
180      <tbody>
181        <tr>
182          <td style="font-style:italic;">
183            <strong style="color:orange;">C</strong>ascading <str
>ong style="color:green;">S</strong>tyle <strong style="color:gree 
>n;">S</strong>heets 
184          </td>
185        </tr>
186        <tr>
187          <td>
188            <strong style="color:red;">C</strong>ascading <strong
> style="color:red;">S</strong>tyle <strong style="color:red;">S</ 
>strong>heets 
189          </td>
190        </tr>
191      </tbody>
192    </table>
193    <p>
194      Vous pouvez essayer d'ordonner différemment les lignes dans
> votre fichier CSS pour constater que leur ordre n'a aucune impor 
>tance. 
195    </p>
196    <p>
197      Les sélecteurs de classe <code>.carotte</code> et <code>.ep
>inard</code> ont priorité sur le sélecteur de balise <code>strong 
></code>. 
198    </p>
199    <p>
200      Le sélecteur d'id <code>#premier</code> a priorité sur les 
>sélecteurs de classe et de balise. 
201    </p>
202    <table style="border:1px solid #36b; padding:1em; background-
>color:#fffff4;"> 
203      <caption style="font-weight:bold; text-align:left; margin-t
>op:1em;"> 
204        Challenges
205      </caption>
206      <tbody>
207        <tr>
208          <td>
209            Sans modifier votre fichier HTML, ajoutez une seule r
>ègle à votre fichier CSS qui garde la même couleur pour toutes le 
>s lettres initiales que précédemment, mais rend le reste du texte 
> du second paragraphe bleu&nbsp;: 
210            <table style="border:2px outset #36b; padding:1em;bac
>kground-color:white;"> 
211              <tbody>
212                <tr>
213                  <td style="font-style:italic;">
214                    <strong style="color:orange;">C</strong>ascad
>ing <strong style="color:green;">S</strong>tyle <strong style="co 
>lor:green;">S</strong>heets 
215                  </td>
216                </tr>
217                <tr>
218                  <td style="color:blue;">
219                    <strong style="color:red;">C</strong>ascading
> <strong style="color:red;">S</strong>tyle <strong style="color:r 
>ed;">S</strong>heets 
220                  </td>
221                </tr>
222              </tbody>
223            </table>
224            <p>
225              À présent, changez la règle que vous venez d'ajoute
>r (sans rien changer d'autre), pour rendre le premier paragraphe  
>bleu également&nbsp;: 
226            </p>
227            <table style="border:2px outset #36b; padding:1em;bac
>kground-color:white;"> 
228              <tbody>
229                <tr>
230                  <td style="font-style:italic;color:blue;">
231                    <strong style="color:orange;">C</strong>ascad
>ing <strong style="color:green;">S</strong>tyle <strong style="co 
>lor:green;">S</strong>heets 
232                  </td>
233                </tr>
234                <tr>
235                  <td style="color:blue;">
236                    <strong style="color:red;">C</strong>ascading
> <strong style="color:red;">S</strong>tyle <strong style="color:r 
>ed;">S</strong>heets 
237                  </td>
238                </tr>
239              </tbody>
240            </table>
241          </td>
242        </tr>
243      </tbody>
244    </table>
245    <p>
246      &nbsp;
247    </p>
248    <h4 id="Pour_continuer" name="Pour_continuer">
249      Pour continuer
250    </h4>
251    <p>
252      Si vous avez eu des difficultés à comprendre cette page, ou
> avez d'autres commentaires à son sujet, n'hésitez pas à contribu 
>er à sa <a href="/Talk:fr/CSS/Premiers_pas/Les_s%C3%A9lecteurs" t 
>itle="Talk:fr/CSS/Premiers_pas/Les_sélecteurs">page de discussion 
></a>. 
253    </p>
254    <p>
255      Votre feuille de style d'exemple commence à avoir l'air den
>se et compliquée. La page suivante décrit des façons de rendre CS 
>S plus facile à lire&nbsp;: <strong><a href="/fr/CSS/Premiers_pas 
>/Des_CSS_lisibles" title="fr/CSS/Premiers_pas/Des_CSS_lisibles">D 
>es CSS lisibles</a></strong> 
256    </p>
257    <p>
258      {{ languages( { "en": "en/CSS/Getting_Started/Selectors", "
>it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Star 
>ted/Selectors", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt":  
>"pt/CSS/Como_come\u00e7ar/Seletores" } ) }} 
259    </p>

Retour à l'historique