Feuilles de style CSS (Cascading Style Sheets)
Page 9: Sélecteurs spéciaux
Toutes les pages 
Feuilles de style CSS (Cascading Style Sheets)
Page 9
Sélecteurs spéciaux
Sélecteurs spéciaux
Groupement et identification d'éléments
J'ai préféré vous montrer, dans cette page, les différents sélecteurs d'éléments existants avant d'aller plus loin en CSS et voir des styles plus avancés.Jusqu'ici, pour désigner un élément à styler en CSS on s'est servi du sélecteur de balise. Le navigateur applique donc le style à toutes les balises qui portent le même nom que le selecteur.
Exemple:
div{
color:#888888;
text-decoration:underline;
}
color:#888888;
text-decoration:underline;
}
Dans ce cas, le navigateur parcourt toute la page en cherchant les balises <div> auxquelles il appliquera le style décrit par le sélecteur. Alors, le contenu de toutes les <div> sera gris et souligné. Mais, est ce qu'on souhaite vraiment que toutes les <div> de cette page soient ainsi? Sinon, comment distinguerons nous les balises auxquelles on appliquera ce style de celles qui n'en sont pas concernées?
Heureusement, il n'y a pas que le sélecteur de balise qui peut désigner l’élément. Il y a aussi le sélecteur de classe et l'identifiant d'élément.
L'attribut class: Groupement d'éléments
En HTML, il existe un attribut qui est très sollicité en CSS il s'agit de l'attribut class. Cet attribut peut avoir comme valeur un nom de votre choix et peut être appliqué à toutes les balises HTML déclarées entre <body> et </body>. On peut appliquer le même nom de classe à plusieurs éléments similaires ou non. Cet ensemble d'éléments constitue un groupement d'éléments.Exemple du code HTML utilisant les classes:
<h1 class="titre"></h1>
<nav class="menu"></nav>
<div class="contenu"></div>
<article>
<div class="meteo"></div>
<div class="rss"></div>
</article>
Dans ce code, nous disposons de trois balises <div>. Si on utilisait le sélecteur de balise pour leur appliquer un style il se ressembleraient toutes. Donc nous allons faire appel au sélecteur de classes qu'on a déjà défini sur chacune des balises. Pour définir un style qui s'applique à une classe on déclare la syntaxe suivante:
<nav class="menu"></nav>
<div class="contenu"></div>
<article>
<div class="meteo"></div>
<div class="rss"></div>
</article>
.contenu{
/* Style de la première DIV */
}
.meteo{
/* Style de la deuxième DIV */
}
.rss{
/* Style de la troisième DIV */
}
Vous avez compris comment ça fonctionne. C'est grâce au point qui vient juste avant le nom de la classe. De cette manière, la navigateur comprend qu'il doit appliquer le style à la balise qui renferme la classe dont le nom est défini en tant que sélecteur. C'est ainsi qu'on peut appliquer des styles différents aux balises même si elles portent le même nom. Mieux encore, on peu appliquer le même style aux balises différentes car ils ont la même classe.
/* Style de la première DIV */
}
.meteo{
/* Style de la deuxième DIV */
}
.rss{
/* Style de la troisième DIV */
}
On peut donner deux (ou plusieurs) noms de classe en même temps à la même balise comme ceci class="classe1 classe2". Il faut séparer les noms par un espace. De cette manière la balise aura les styles de la classe1 et de la classe2 simultanément.
Attribut id: identifiant d'élément
Si une classe peut être déclarée plusieurs fois dans le même document pour constituer un groupement d'éléments (qui accueilleront le même style), il existe un autre attribut HTML qui, quant à lui, ne doit figurer qu'une seule fois dans le même document. Il s'agit de l'attribut id connu par identifiant d'élément.Exemple de code utilisant les identifiants:
<img id="logo" />
<div id="slogan"></div>
Si on veut cibler les éléments par leur id afin de leur appliquer un style, le code CSS ressemblerait à ceci:
<div id="slogan"></div>
#logo{
/* Style de l'image affichant le logo */
}
#slogan{
/* Style de la DIV qui contient le slogan */
}
Là encore, on utilise le croisillon (confondu à tort avec le dièse) pour sélectionner un élément par le biais de son identifiant.
/* Style de l'image affichant le logo */
}
#slogan{
/* Style de la DIV qui contient le slogan */
}
Notez que le rôle de l'identifiant ne se limite pas au CSS, mais il est très pratique aussi en Javascript.
Cibler tous les éléments
Pour cibler tous les éléments d'un document HTML, on utilise le symbole astérisque (*). De cette manière, la balise <body> et toutes les balises qu'elle contient sont concernées par le style.Exemple:
*{
color:#888888;
font-size:10pt;
font-family:verdana, arial, sans-serif;
}
color:#888888;
font-size:10pt;
font-family:verdana, arial, sans-serif;
}
Cibler tous les éléments ayant un attribut particulier
Pour cibler toutes les balises sur lesquelles on a déclaré un attribut particulier (quelque soit sa valeur) on fait appel au sélecteur de balise suivi de crochets qui renferment le nom de l'attribut souhaité.Exemple:
img[title]{
opacity:0.7;
filter:alpha(opacity=70);
}
Dans ce cas, toutes les balises <img> qui ont un attribut title seront translucides.
opacity:0.7;
filter:alpha(opacity=70);
}
Cibler tous les éléments ayant un attribut avec une valeur particulière
Pour cibler toutes les balises sur lesquelles on a déclaré un attribut qui a une valeur bien définie on fait appel au sélecteur de balise suivi de crochets qui renferment le nom de l'attribut souhaité auquel on a attribué la valeur voulue (comme si on le déclarait en HTML).Exemple:
input[type="text"]{
border:solid 1px blue;
}
Dans ce cas, toutes les zones de texte auront une bordure normale colorée en bleu.
border:solid 1px blue;
}
Cibler un élément contenu dans un autre
Pour cibler un élément contenu dans un autre, on déclare le sélecteur du premier élément suivi d'un espace suivi du sélecteur du deuxième élément. Le sélecteur peut être n'importe lequel parmi ceux vu précédemment (balise, classe, id...).Exemple:
div img{
margin:10px;
}
Dans ce cas, toutes les images qui sont déclarées dans une balise <div> auront une marge de 10px de tous les cotés.
margin:10px;
}
Cibler un élément enfant direct d'un parent
Si on veut désigner un élément enfant appartement directement à un parent spécifié alors on utilise le symbole >.Exemple:
div>img{
margin:10px;
}
Dans ce cas, seules les images qui sont intégrées directement dans une balise <div> seront stylées.
margin:10px;
}
Cibler plusieurs éléments à la fois
Pour désigner plusieurs éléments à la fois, il suffit de les déclarer tous séparés par une virgule.Exemple:
header,footer,nav,section{
margin:0;
border:none;
}
Dans ce cas, les balises <header>, <footer>, <nav> et <section> n’auront aucune marge ni aucune bordure.
margin:0;
border:none;
}
Cibler un élément précédé immédiatement par un autre
Afin de spécifier un élément HTML qui suit directement un élément particulier on utiliser le caractère +.Exemple:
nav+h1{
margin:auto;
}
Dans cet exemple le style sera appliqué à la balise <h1> qui vient directement après la balise <nav>. C'est à dire qu'on a déjà fermé la balise <nav> puis on a ouvert la balise <h1> juste après.
margin:auto;
}
Ordre d'application des styles
Souvent, on se confronte à un élément dont le style est décrit plusieurs fois. La règles est simple, les propriétés qui ne sont pas répétés d'un style à un autre sont combinées et appliquées toutes à l'élément, par contre, les règles qui se répètent s'annulent les unes par les autres, celles qui sont définies en dernier seront appliquées.Les sélecteurs en vidéo
Page 9
Sélecteurs spéciaux
Sélecteurs spéciaux
