🏆 Challenge #N1 · Sélecteurs HTML · challenges/N1_selecteurs.html CSS · challenges/css/N1_selecteurs.css


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

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

Résultat attendu