Mémo
// ↓ Les 3 types de sélections par type ↓
.title { // Sélectionne tous les éléments qui ont la classe "title"
border: 1px solid red; // Met une bordure rouge
}
#mainTitle { // Sélectionne l'élément avec l'ID "mainTitle"
border: 1px solid blue; // Met une bordure bleue
}
body { // Sélectionne toutes les balises "body"
border: 1px solid pink; // Met une bordure rose
}
// ↓ Différentes façons de sélectionner des éléments ↓
body .title {
// Sélectionne tous les éléments avec la classe "title" qui se trouvent dans la balise "body"
border: 1px solid green; // Met une bordure verte
}
.box > .subbox {
// Sélectionne tous les éléments avec la classe "subbox" qui se trouvent directement dans les éléments ayant la classe "box"
border: 1px solid green; // Mettre une bordure verte
}
.box.special {
// Sélectionne les éléments qui ont la classe "box" et "special"
border: 1px solid green; // Met une bordure verte
}
1️⃣ Créez et sélectionnez des éléments
Créez 3 boîtes (balise div) ci-dessous, puis sélectionnez-les avec : une classe, un ID, et leur balise. Appliquez leur une bordure de couleur pour constater que votre sélecteur CSS fonctionne. Du style va automatiquement s'appliquer sur vos boîtes.
🎯 Résultat attendu
