CSS, les différents sélecteurs

Vous avez créé du contenu et voulez le publier, il est important de travailler sur la mise en page. Les sélecteurs vous permettront de sélectionner précisément  les différents éléments de vos page? Encore faut-il les connaitre, voici une explication des différents sélecteurs disponibles.Certainement vous avez commencé par appliquer une belle mise en page, vous connaissez surement les principales balises mais une sélection peut se faire de manière très précise (à l’unité ou bien par groupe), nous allons voir ici les principaux sélecteurs à connaitre.

*, sélecteur général

Le premier est *, celle-ci vous permettra d’appliquer une propriété à l’ensemble de votre page :

* {
     background-color : green;
}

Cela mettra un magnifique fond vert à tout votre document, équivalent à :

html {
     background-color: green;
}

Vous pouvez également sélectionner tous les enfants d’un contenant :

section * {
  background-color : green;
}

.Voir l’exemple

Sélection sur le type de balise

Si vous voulez sélectionner toutes les balises d’un type, il suffit d’indiquer le nom de la balise :

li {
  background-color : green;
}

Voir l’exemple

Sélection de plusieurs balises

Pour sélectionner plusieurs balises pour leur attribuer les mêmes propriétés, vous allez simplement séparer ces balises par une « , » (virgule) :

h1, p {
  background-color : green;
}

Voir l’exemple.

Le sélecteur enfant

Si vous avez besoin de sélectionner seulement des balises sous certaine balises, vous allez utiliser un sélecteur descendant :

ol li {
  background-color : green;
}

Voir l’exemple.

Le sélecteur d’enfant direct

Si vous voulez sélectionner l’enfant direct d’une balise, vous utiliserez :

ul > ul {
  background-color : green;
}

Voir l’exemple.

Sélecteur d’enfant consécutif

Pour sélectionner l’élément qui est directement après une balise, vous utiliserez :

h1 + article {
  background-color : green;
}

Voir l’exemple.

Sélection sur l’identifiant

Vous avez certainement déjà vu l’attribut id dans une balise, cette id doit être unique sur la page. Il permet de nommer avec précision une balise, pour la sélectionner :

#article_2 {
  background-color : green;
}

Voir l’exemple.

Sélection d’une classe

En revanche, si vous souhaitez sélectionner plusieurs éléments avec la même classe, vous utiliserez :

.important {
  background-color : green;
}

Voir l’exemple.

Sélection au survol

Cette sélection est principalement utiliser avec les lien, cela appliquera une mise en forme au survol avec la souris de l’élément sélectionner.

a:hover, article:hover {
  background-color : green;
}

Voir l’exemple.

Sélecteur sur les liens

On a vu que le sélecteur précédent était fréquemment utilisé sur les liens, il en existe deux autres de très fréquent, le premier : a:link est le comportement par défaut du lien, le second a:visited correspond à un lien dèjà visité.

a:link {
     background-color: blue;
}
a:visited {
     background-color: red;
}

Voir l’exemple.

Sélection sur l’attribut

Nous pouvons également sélectionner les balises en fonction de leur attribut.

Attribut sans valeur particulière

a[title] {
    color:red;
}
span[foo]{
    color: blue;
}

Attribut avec une valeur

Dans le cas d’une balise avec un attribut particulier, vous pouvez faire de différentes manières :

  • nom complet
    a[title="valeur"]{
        votre code CSS
    }
  • une partie du nom de la valeur de l’attribut
    a[href*="bout de nom"]{
        code css
    }
  • nom de la valeur commençant par
    span[foo^="qui_commence_par"]{
        code css
    }
  • nom de la valeur se terminant par
    span[href$=".jpg"] {
        color: red;
    }

Voir l’exemple.

Elément qui n’est pas

Fonction qui peut être utile, nous pouvons appliquer des règles à tous les éléments en excluant certains autres

span:not(élément_à_exclure){
     code CSS
}

Voir l’exemple.

Les pseudos éléments

Les pseudo-éléments identifiés par « :: » . Voici une liste des pseudo-éléments :

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop
  • ::placeholder
  • ::marker
  • ::spelling-error
  • ::grammar-error
block::pseudoElement{
    code CSS
}

BEFORE et AFTER

Voici une fonction très intéressante qui vous permettra par exemple d’intégrer une image avant les éléments d’une liste :

span:before{
     /* code CSS */
}
span:after{
 /* code CSS */
}

First-letter et first-line

Cela va permettre d’appliquer des règles CSS soit sur la première lettre soit sur la première ligne d’un élément de type block, inline-block, table-cell, list-item ou table-caption sur les autres type, ils n’auront aucun effets.

X::first-line{
    code CSS
}
X::first-letter{
    code CSS
}

Voir l’exemple.

Les enfants

Nous allons utiliser différentes pseudo-classes pour sélectionner les éléments sur lesquels appliquer des règles CSS. Ces différentes pseudo-classes sont les suivantes :

  • ::nth-child(n), permet de sélectionner le n élément
  • ::nth-last-child(n), sélectionnera le nème éléments en partant de la fin.
  • ::first-child, sélectionnera le premier élément
  • ::last-child sélectionnera le dernier
  • Il en existe d’autres mais ceux-ci si sont les principaux à mon sens.

Voir l’exemple.

Conclusion

Je tâcherai d’en ajouter au fur et à mesure mais vous allez pouvoir commencer à bien appréhender les sélecteurs en CSS.

Laisser un commentaire