Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les sélecteurs CSS : classes et id

Les sélecteurs CSS : classes et id

Dans ce chapitre on va attaquer css les sélecteurs CSS : classes et id, qui apportent d'autres possibilités vraiment très pertinentes. Tout d'abord un peu de théorique comme d'hab. css mais ne vous en faites pas, ça ne serait pas pour longtemps.

Introduction aux sélecteurs CSS : classes et id

Comment faire pour appliquer un style à une seule balise et non pas à tout le document ? Par exemple comment peut-on cibler uniquement tel ou tel paragraphe ? Et non pas tous les paragraphes, ou bien les trois premiers titres et non pas tous les titres. Vous allez me dire c'est facile, il suffit d'ajouter l'attribut style à la balise qu'on veut modifier, ainsi elle va changer de forme, eh ben c'est juste, mais il y a une autre méthode plus avantageuse, et puisque je cherche toujours à vous inculquer de bonnes pratiques de codage. Je vais vous apprendre les classes et les id.

Les classes

Dans le chapitre "lier des styles CSS à une page Web par la balise link, la règle @import ou la balise style". J'ai bel et bien signalé que les trois premières méthodes apportent leur effet sur tout le document. Ce qui peut être contraignant dans le cas où on entend cibler uniquement certains éléments de la page.

Grâce aux classes et aux id on peut attribuer un style à une balise bien déterminée. Pour ce faire il suffit de spécifier un sélecteur de classe puis l'appeler dans le body de la page par l'attribut universel "class" qui marche sur toutes les balises, au même titre que l'attribut style et id. La syntaxe générale est la suivante :

.nom-classe { /* le nom de classe commence toujours par un point */
tapez vos styles CSS ici
} 
et dans un stade avancé vous pouvez affecter la classe
à n'importe quelle balise via l'attribut universel class.

<h1 class="nom-class"> titre </h1>

Pour ceux qui ont du mal à comprendre ce charabia, je leur ai préparé un exemple vivant :

.important { /* une classe pour mettre en exergue certains éléments XHTML */
font-weight: bold;
color: red;
text-decoration: underline;
}

Puis dans un stade plus avancé dans le corps de votre document, vous pouvez appeler le style défini avec le sélecteur de classe ".important" grâce à l'attribut universel class de cette manière :

<h1 class="important">texte important</h1>.

Des commentaires s'imposent :

Affecter plusieurs classes à la même balise via l'attribut class

Une idée très brillante consiste à attribuer plusieurs classes à la même balise, pour solliciter plusieurs styles en même temps. La syntaxe n'a rien de spécial. Il suffit juste de séparer les classes par des espaces. Supposons que j'ai défini les trois classes : ".souligner" ".gras" ".italique", je peux les affecter à la même balise. Exemple :

<p class="souligner gras italique">
texte souligné, mis en gras et en italique
</p>

Cet effet ne peut pas être sollicité par la notion des id id

Les id

Les id se différencient des classes par deux points de fond et un point de forme :

Voici un exemple complet : 

#souligner {
text-decoration: underline;
} 
puis dans le corps de votre document 
<p id="souligner"> votre texte </p>

Si on rencontre dans la même page : <h2 id="souligner"> ce n'est plus correct, l'id n'est utilisé qu'avec une et une seule balise. Soit vous investissez votre id dans la balise p ou dans h2, sinon utilisez la notion des classes.

Est-il possible d'utiliser un sélecteur d'ID pour plusieurs balises ?

Certes un ID ne doit faire l'objet d'un usage que pour une seule fois. Mais j'ai mené quelques testes sous plusieurs navigateurs : IE 6 et 7, Firefox, Mozilla, Netscape, Opera, Safari et K-Meleon et j'ai constaté les faits suivants :

L'attribut id au service du JavaScript et des ancres (signets)

Lorsque vous entendez parler de l'attribut id ne penser pas automatiquement aux styles CSS. En fait vous avez le plein droit de spécifier un attribut id à une balise même si vous n'avez spécifié aucun sélecteur d'id. Ceci est très fréquent lorsque vous n'utilisez pas l'attribut id pour appelez un style CSS, mais plutôt pour des raisons de JavaScript ou bien pour la définition des ancres.

Définir une ancre (signet) avec l'attribut id

Grâce à l'attribut id, vous avez la possibilité de créer une ancre qui pointe vers n'importe quel élément XHTML, qu'il soit de type bloc ou en-ligne. Exemple :

<body>
<h1><a href="#xhtml">Le langage XHTML</a></h1>
dans un stade avancé du document
<p id="xhtml"> Bla Bla </p>
</body>

Voir le chapitre définir une ancre (signet) relative ou absolue pour un lien.

L'attribut id au service du JavaScript, DHTML et DOM

L'un des atouts majeurs de l'attribut id, c'est qu'il permet au JavaScript d'agir sur n'importe quel élément XHTML via le DOM, pour réaliser des effets DHTML très agréables à voir.

Pour accéder aux éléments XHTML on utilise le méthode : document.getElementById("nom-id"), qui signifie littéralement "atteindre l'élément par son id". Ceci vous permet d'accéder à l'élément XHTML, pour modifier les valeurs de ses attributs ou lui appliquer des méthodes. A titre d'exemple, j'ai attribué à l'en-tête ci-dessus l'id ("#attribut-id-javascript"), puis j'ai créé un effet DHTML qui permet de convertir toute la chaîne du titre en minuscule au passage de souris (pour annuler l'effet actualiser la page).

En plus le même attribut id est exploité par l'ancre qui se trouve dans le sommaire "L'attribut id au service du JavaScript, DHTML et DOM".

Bon voilà, ce chapitre touche à sa fin. Dans le prochain tuto, on va s'approfondir dans la syntaxe CSS (imbrication de sélecteurs simples et commentaires CSS).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau