Les sélecteurs sont des symboles utilisés au niveau des feuilles de style
pour faciliter l'application des classes aux éléments. Ils permettent de mettre
en place des règles d'application de styleaux différents tags en s'appuyant sur divers
critères.
Leur utilisation se fait dans la déclaration des classes dans les feuilles de style.
Ces différents sélecteurs sont :
- Le sélecteur * : sélecteur universel
- Le sélecteur > : sélecteur tag enfant de
- Le sélecteur + : sélecteur tag ayant pour parent
- Le sélecteur [Attr] : sélecteur tag ayant un attribut spécifique
- Le sélecteur Classes Multiples : sélecteur tag ayant pour classe
|
|
|
Le sélecteur * est universel. Cela signifie qu'il impacte tous les éléments de la page
sur laquelle il est appliqué. Tous les effets de styles associés à ce sélecteur seront appliqués
à tous les tags de la page.
» Exemples :
- Le style * {font-weight : 700; font-style : italic; }
aura pour effet d'afficher tous les éléments textes en gras et en italique.
|
|
|
|
Le sélecteur > a pour signification "enfant de".
Cela indique que le style défini avec ce sélecteur par :
s'applique aux balises enfant ayant pour conteneur direct la balise parent.
» Exemples :
- Le style ol > li {font-weight : 700; font-style : italic; }
affichera tous les éléments des balises <li> (List Item) appartenant
à une liste ordonnée <ol> (Ordered List) en gras et en italique.
- Le style div > span {text-decoration : underline; font-style : italic; }
affichera le texte contenu dans les balises <span> utilisés directement dans
une div en souligné et en italique.
|
|
|
|
|
Le sélecteur + indique que la classe définie sera appliquée sur tous les
éléments qui seront précédés par l'élément défini ensuite
|
» Exemples :
pre + p {font-style: italic;}
|
|
|
|
Le sélecteur attribut agit sur les tags spécifiés contenant les attributs
déclarés dans le style. Ainsi la nomenclature div[class] appliquera le style
spécifié aux balises div contenant l'attribut class.
» Exemples :
- Le style p[class] {font-style: italic;}
aura pour effet d"afficher le texte contenu dans las tags <p> contenant
un attribut class en italique.
- Le style select[id] {font-family: verdana;}
appliquera la police de caractère "verdana" aux listes déroulantes ayant un identifiant.
|
|
|
|
|
Ce sélecteur permet de définir pour un élément donné des classes spécifiques
qui ne seront appliquées qu'à cet élément lorsque la classe sera appelée.
|
» Exemples :
p.italic {font-style: italic;}
p.underline {text-decoration: underline;}
p.large {font-size: 120%;}
p.small {font-size: 90%;}
|
