Introduction aux Sélecteurs Composés

En CSS, les sélecteurs composés résultent de la combinaison de plusieurs sélecteurs de base. Cette approche permet de cibler des éléments HTML avec une précision chirurgicale, facilitant ainsi la maintainance et la structure du code stylsitique.

Le Sélecteur d'Intersection

Ce sélecteur cible un élément qui répond simultanément à plusieurs conditions. Il est formé en collant deux sélecteurs (souvent un sélecteur de balise et un sélecteur de classe) sans aucun espace entre eux.

/* Cible uniquement les balises "section" possédant la classe "featured" */
section.featured {
    border: 2px solid #2ecc71;
    padding: 20px;
}

Le Sélecteur d'Union (Groupement)

Le sélecteur d'union permet d'appliquer les mêmes règles CSS à plusieurs cibles différentes. On sépare chaque sélecteur par une virgule. C'est une technique essentielle pour réduire la redondance dans les feuilles de style.

/* Applique une police spécifique aux titres, à une classe et à un identifiant précis */
h1, .main-title, #hero-heading {
    font-family: 'Helvetica', sans-serif;
    color: #2c3e50;
}

Le Sélecteur de Descendant

Ce sélecteur est utilisé pour cibler un élément situé à l'intérieur d'un autre, quel que soit son niveau d'imbrication (enfant, petit-enfant, etc.). On sépare le parent et le descendant par un espace.

/* Cible tous les liens <a> situés n'importe où dans un <footer> */
footer a {
    text-decoration: none;
    color: #95a5a6;
}

Le Sélecteur d'Enfant Direct

À la différence du sélecteur de descendant, le sélecteur d'enfant direct ne cible que les éléments de premier niveau situés immédiatement sous le parent. On utilise le symbole > pour cette relation.

/* Cible uniquement les <li> qui sont les enfants directs de <ul> */
ul > li {
    list-style-type: square;
}

Les Sélecteurs d'Attributs

Ces séletceurs permettent de styliser des éléments en fonction de la présence ou de la valeur de leurs attributs HTML.

/* Cible les éléments dont la classe commence par "btn-" */
[class^="btn-"] {
    cursor: pointer;
}

/* Cible les éléments dont le lien se termine par ".pdf" */
a[href$=".pdf"] {
    color: red;
}

/* Cible les éléments dont l'attribut title contient le mot "info" */
div[title*="info"] {
    background-color: #ecf0f1;
}

Les Pseudo-éléments

Les pseudo-éléments permettent de styliser des parties spécifiques d'un élément ou d'insérer du contenu généré via CSS.

Stylisation du texte

/* Modifie la première lettre d'un paragraphe */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

/* Change l'apparence du texte sélectionné par l'utilisateur */
::selection {
    background: #f1c40f;
    color: #fff;
}

Insertion de contenu avec ::before et ::after

Ces pseudo-éléments créent des éléments virtuels au début ou à la fin du contenu d'un élément. Ils nécessitent impérativement la propriété content.

/* Ajoute une icône ou un texte avant un lien */
.external-link::before {
    content: "🌐 ";
}

/* Ajoute un indicateur après un élément requis */
.required::after {
    content: " *";
    color: #e74c3c;
}

Note : Bien que :before et :after (un seul deux-points) soient supportés pour des raisons de compatibilité historique, la syntaxe moderne CSS3 privilégie ::before et ::after pour distinguer clairement les pseudo-éléments des pseudo-classes.