Sobes.tech
Intern

Qu'est-ce qu'un sélecteur en CSS?

sobes.tech IA

Réponse de l'IA

Le sélecteur en CSS est un motif qui détermine quels éléments HTML reçoivent les styles. Il indique au navigateur quels éléments, un ou plusieurs, doivent être sélectionnés.

Il existe différents types de sélecteurs :

  • Sélecteurs de type (Type selectors): Sélectionnent toutes les instances d’un élément HTML.

    p { /* Sélectionne tous les paragraphes */
      color: blue;
    }
    
  • Sélecteurs de classe (Class selectors): Sélectionnent les éléments avec une valeur spécifique dans l’attribut class.

    .highlight { /* Sélectionne tous les éléments avec la classe "highlight" */
      background-color: yellow;
    }
    
  • Sélecteurs d’ID (ID selectors): Sélectionnent un seul élément avec une valeur spécifique dans l’attribut id.

    #header { /* Sélectionne l’élément avec l’id "header" */
      font-size: 2em;
    }
    
  • Sélecteur universel (Universal selector): Sélectionne tous les éléments.

    * { /* Sélectionne tous les éléments de la page */
      margin: 0;
      padding: 0;
    }
    
  • Sélecteurs d’attributs (Attribute selectors): Sélectionnent les éléments en fonction de la présence ou de la valeur de leurs attributs.

    [type="text"] { /* Sélectionne tous les input avec type="text" */
      border: 1px solid gray;
    }
    
  • Pseudo-classes (Pseudo-classes): Sélectionnent les éléments en fonction de leur état.

    a:hover { /* Sélectionne le lien au survol */
      text-decoration: underline;
    }
    
  • Pseudo-éléments (Pseudo-elements): Sélectionnent des parties spécifiques de l’élément ou créent des "éléments fictifs".

    p::first-line { /* Sélectionne la première ligne du paragraphe */
      font-weight: bold;
    }
    
  • Combinateurs (Combinators): Définissent les relations entre les sélecteurs.

    Combinateur Description Exemple
    Espace ( ) Sélecteur descendant (Descendant selector) div p
    > Sélecteur enfant (Child selector) div > p
    + Sélecteur frère adjacent (Adjacent sibling selector) h1 + p
    ~ Sélecteur frère général (General sibling selector) h1 ~ p

Les sélecteurs peuvent être combinés pour une définition plus précise des éléments.