Les sélecteurs CSS

Le but du sélecteur

Il doit cibler une balise ou un ensemble de balise pour leur appliquer une une série de règles

L’ensemble des règles définit le style global d’une balise et son comportement vis à vis des autres balises du document

Les différents types de sélecteur

Il existe trois sélecteurs principaux

• le sélecteur de balise
• le sélecteur d’ID
• le sélecteur de classe

Il existe des sélecteurs plus confidentiels :

• le sélecteur d’attribut
• le sélecteur de pseudo classe
• le sélecteur global

Les balises HTML possèdent deux attributs facultatifs

• l’ID
• la classe

La classe

La classe permettent de donner une catégorie à une balise.
Un élément peut posséder plusieurs classes séparées par des espaces

<p class="intro-article">Lorem ipsum dolor sit amet. Ut enim georges romero ad minim veniam.</p>

<button class="bouton large yellow">Cliquez ici.</button>

L’id (prononcez AïeDi)

<article id="article-principal">Lorem ipsum dolor sit amet. Ut enim starship troopers ad minim veniam.</article>

Il permet d’attribuer un identifiant unique à une balise.

Donner deux identifiants identiques dans une même page web est interdit par le langage HTML.

Exploitation des classes et des id

Ces deux attributs permettent de manipuler les éléments HTML via JavaScript et CSS.
En pratique, on essaie de limiter le ciblage CSS via les id.

Son but est de cibler toutes les balises appartenant à la même classe. On utilise le symbole point suivi du nom de la classe CSS.

.nom-de-la-classe

Le HTML

<p class="intro-article">Lorem ipsum dolor sit amet. Ut enim starship troopers ad minim veniam.</p>

Le CSS

.intro-article { border-radius: 2px; background-color: black; color: white; border: 0; padding: 5px; }

Ces règles (ou cette déclaration de style) s’appliquera à toutes les balises possèdant la classe intro-article

Son but est de cibler la balise possèdant cet id

La syntaxe est #identifiant

Le HTML

<p id="article-principal">Lorem ipsum dolor sit metropolis. Ut enim ad minim veniam.</p>

Le CSS

#article-principal { border-radius: 2px; background-color: black; color: white; border: 0; padding: 5px; }

Ces règles s’appliquera à la balise unique possèdant l’id article-principal

Son but est de cibler toutes les balises appartenant au même type

Le HTML

<p>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p>

Le CSS

p { border-radius: 2px; background-color: black; color: white; border: 0; padding: 5px; }

Ces règles (ou cette déclaration de style) s’appliquera à TOUTES les balises <p> de la page web.
Cette technique est à utiliser avec parcimonie car elle appliquera des styles à l’intégralité des balises d’un site. Privilégiez le ciblage par classe dans le doute.

Pour cibler plus précisément une balise ou un ensemble de balises, on peut combiner les sélecteurs

La hiérarchie en CSS

La syntaxe CSS permet de cibler les balises HTML selon leur hiérarchie, c’est à dire selon leur imbrication.

Syntaxe de la hiérarchie

On distingue deux marqueurs importants :

• l’espace
• le chevron >

Exemple avec

Le HTML

<article> 
  <h1>Ex ea commode maximus.</h1> 
  <p class="intro">Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p> 
</article>

Le CSS

article .intro { 
padding: 20px; 
font-family: Montserrat, sans-serif; 
}

Ici on cible uniquement les balises de classe intro placées à l’intérieur de balises de type article

le sélecteur chevron > permet de cibler le sélecteur suivant uniquement si celui-ci est un enfant direct

Le HTML

<article> 
<h1>Ex ea commode maximus.</h1>
 <p class="intro">Lorem ipsum dolor amet. Ut enim ut aliquip ex eacommodo consequat ad minim veniam <button>En savoir plus</button>.</p>
 </article>

Le CSS

article > button { padding: 20px; font-family: Montserrat, sans-serif; }