.class et #id

Nous allons maintenant voir comment cibler un élément en particulier plutôt qu'un type d'élément. Pour cela, nous allons leur donner un nom, puis les cibler en CSS.

Afin d'affiner encore plus le ciblage CSS, il est possible de nommer les balises en HTML. Pour cela, deux choix s'offrent à nous : les .class et les #id.

Les #id

Pour donner une #id à une balise, nous allons utiliser l'attribut HTML id :

				
					<p id="ma_super_id">
						Un super paragraphe avec <strong>du texte en gras</strong>.
					</p>
				
			

Attention ! Le nom d'une #id ne doit pas contenir :

• des espaces,
• des caractères spéciaux,
• des accents.

Aussi, il doit commencer par une lettre (non pas un chiffre).

Pour cibler une #id en CSS, nous allons utiliser le sélécteur # :

				
					/* Je cible l'ID #ma_super_id */
					#ma_super_id{
						color: red;
					}
					/* Je cible la balise <p> qui a l'ID #ma_super_id */
					p#ma_super_id{
						color: red;
					}
				
			

Il existe deux manière de cibler une #id.

Attention ! Il ne faut pas mettre d'espace entre p et #ma_super_id. Sinon, cela veut dire que vous ciblez un élément avec l'id #ma_super_id situé dans une balise <p> !

Les .class

De la même manière que les #id, nous allons utiliser l'attribut HTML class :

				
					<p class="ma_super_class">
						Un super paragraphe avec <strong>du texte en gras</strong>.
					</p>
				
			

Pour cibler une .class en CSS, nous allons utiliser le sélécteur . :

				
					/* Je cible la classe .ma_super_class */
					.ma_super_class{
						color: red;
					}
					/* Je cible la balise <p> qui a la classe .ma_super_class */
					p.ma_super_class{
						color: red;
					}
				
			

Attention ! Il ne faut pas mettre d'espace entre p et .ma_super_class. Sinon, cela veut dire que vous ciblez un élément avec la classe .ma_super_id situé dans une balise <p> !

Différences entre #id et .class

La principale différence entre les #id et les .class relève de leur utilisation.
Une #id doit être unique au document. À partir du moment où vous nommez une élément #ma_super_id, aucun autre élément ne peut avoir cette #id.
Aussi, un élément ne peut avoir qu'une seule #id.

Une .class peut être utlisée sur plusieurs éléments, de nature dirrérente.
Par exemple, nous pouvons créer une class .red pour donner une couleur rouge :

				
					.red{
						color: red;
					}
				
			

Pour ensuite l'appliquer à plusieurs éléments :

				
					<p class="red">
						Un super paragraphe avec <strong>du texte en gras</strong>.
					</p>
					<p class="red">
						Un autre mega paragraphe rouge.
					</p>
					<ul>
						<li>
							Élément de liste
						</li>
						<li class="red">
							Élément de liste rouge
						</li>
						<li>
							Élément de liste
						</li>
						<li>
							Élément de liste
						</li>
					</ul>
				
			

Il est aussi possible de cumuler les .class :

				
					/* Couleur rouge */
					.red{
						color: red;
					}
					/* Texte en capitale */
					.capitale{
						text-transform: uppercase;
					}
				
			

				
					<p class="red">
						Un super paragraphe avec <strong>du texte en gras</strong>.
					</p>
					<p class="red capitale">
						Un autre mega paragraphe rouge.
					</p>
					<ul>
						<li class="capitale">
							Élément de liste
						</li>
						<li class="red">
							Élément de liste rouge
						</li>
						<li>
							Élément de liste
						</li>
						<li>
							Élément de liste
						</li>
					</ul>
				
			

Voilà le résultat :