css1

📖 Définition : Sélectionne TOUS les éléments de la page.

* {
    border: 1px dashed red;
    padding: 5px;
}

📖 Définition : Sélectionne tous les éléments d'une balise spécifique.

p {
    color: blue;
    font-weight: bold;
}

📖 Définition : Sélectionne tous les éléments ayant une classe spécifique.

.highlight {
    background: yellow;
    padding: 5px 10px;
}

📖 Définition : Sélectionne un UNIQUE élément par son ID.

#unique {
    background: orange;
    color: white;
    padding: 10px;
}

📖 Définition : Sélectionne selon la présence ou la valeur d'un attribut HTML.

input[type="text"] { border: 2px solid blue; }
input[type="password"] { border: 2px solid red; }

📖 Définition : Applique le même style à plusieurs sélecteurs.

h3, h4, p {
    color: purple;
    font-style: italic;
}

📖 Définition : Sélectionne tous les descendants d'un élément.

div p { background: lightblue; }

📖 Définition : Sélectionne uniquement les enfants directs.

div > p { background: pink; }

📖 Définition : Sélectionne l'élément juste après.

h4 + p { color: red; font-weight: bold; }

📖 Définition : Sélectionne tous les frères suivants.

h4 ~ p { background: lightgreen; }

📖 Définition : Style appliqué quand la souris survole l'élément.

button:hover {
    background: red;
    transform: scale(1.1);
}

📖 Définition : Style appliqué quand l'élément est actif/focalisé.

input:focus {
    border-color: green;
    box-shadow: 0 0 10px green;
}

📖 Définition : Sélectionne le premier enfant de son parent.

li:first-child { background: green; color: white; }

📖 Définition : Sélectionne le dernier enfant de son parent.

li:last-child { background: red; color: white; }

📖 Définition : Sélectionne le Nième enfant (odd=impair, even=pair).

li:nth-child(odd) { background: lightblue; }
li:nth-child(even) { background: pink; }

📖 Définition : Sélectionne les cases à cocher cochées.

input:checked + label {
    color: green;
    text-decoration: line-through;
}

📖 Définition : Sélectionne les éléments de formulaire désactivés.

input:disabled {
    background: #e5e7eb;
    cursor: not-allowed;
}

📖 Définition : Insère du contenu AVANT l'élément.

p::before {
    content: "👉 ";
}

📖 Définition : Insère du contenu APRÈS l'élément.

a::after {
    content: " 🔗";
}

📖 Définition : Style la première lettre du texte (effet lettrine).

p::first-letter {
    font-size: 3em;
    color: red;
    float: left;
}

📖 Définition : Style le texte sélectionné par l'utilisateur.

p::selection {
    background: yellow;
    color: black;
}

📖 Définition : Sélectionne TOUS les éléments SAUF ceux spécifiés.

li:not(.special) {
    color: gray;
}

📖 Définition : Sélectionne un parent qui contient un certain enfant.

div:has(> img) {
    border: 3px solid green;
    padding: 10px;
}

✨ RÉSULTAT

Avec image (bordure verte)

Sans image (bordure grise)

📖 Définition : Regroupe plusieurs sélecteurs de manière compacte.

:is(h3, h4, h5) {
    color: purple;
    text-decoration: underline;
}

📖 Définition : Style le texte du placeholder dans les champs input.

input::placeholder {
    color: red;
    font-style: italic;
}