Sélecteur d'éléments enfants (>)
Cible les éléments qui sont des enfants directs d'un autre élément.
ul > li {
/* Styles pour les éléments li qui sont des enfants directs d'ul */
}
CSS
LEÇON 4
Objectif du Cours
L'objectif de cette leçon est de fournir une compréhension approfondie des sélecteurs avancés en CSS, permettant aux développeurs de styliser des éléments de manière précise et conditionnelle. En apprenant à utiliser ces sélecteurs, les développeurs pourront améliorer la structure et l'interactivité de leurs sites web, créant ainsi des interfaces utilisateur plus sophistiquées et réactives. Les connaissances acquises permettront d'appliquer des styles basés sur la relation entre les éléments, leurs attributs ou leur état, offrant une flexibilité accrue dans le design web.
Introduction
Les sélecteurs avancés en CSS offrent aux développeurs web des outils puissants pour styliser des éléments de manière précise et efficace. En permettant de cibler des éléments basés sur leur position, leurs attributs ou leur état, ces sélecteurs sont essentiels pour créer des mises en page complexes et des interfaces utilisateur réactives. Cette leçon explore les différents types de sélecteurs avancés, incluant les sélecteurs d'éléments, les pseudo-classes et les pseudo-éléments, ainsi que leurs applications pratiques.
Pseudo-classes CSS(:)
Les sélecteurs avancés en CSS offrent une précision accrue pour cibler des éléments spécifiques dans une page web. Ils permettent de définir des styles en fonction de la relation entre les éléments, de leurs attributs ou de leur état. Voici un aperçu des sélecteurs avancés les plus utilisés :
Sélecteur d'éléments adjacents (+)
Cible les éléments qui sont adjacents immédiats d'un autre élément.
h2 + p {
/* Styles pour le paragraphe qui suit immédiatement un titre h2 */
}
Sélecteur d'éléments généraux (~)
Cible les éléments qui sont des frères suivants d'un autre élément, sans être nécessairement adjacents immédiats.
h2 ~ p {
/* Styles pour tous les paragraphes qui suivent un titre h2 */
}
Sélecteur d'éléments d'attribut ([attribut=valeur])
Cible les éléments ayant un attribut spécifique avec une valeur spécifique.
input[type="text"] {
/* Styles pour les éléments input de type texte */
}
Pseudo-éléments CSS(::)
:hover
Cible un élément lorsqu'il est survolé par la souris.
button:hover {
background-color: #f0f0f0;
}
:active
Cible un élément lorsque l'utilisateur clique dessus.
button:active {
transform: translateY(1px);
}
:focus
Cible un élément lorsqu'il a le focus, généralement utilisé pour les éléments de formulaire.
input:focus {
border-color: #007bff;
box-shadow: 0 0 5px #007bff;
}
:first-child
Cible le premier enfant d'un élément parent.
li:first-child {
font-weight: bold;
}
:last-child
Cible le dernier enfant d'un élément parent.
li:last-child {
color: red;
}
:nth-child(n)
Cible l'élément spécifié par sa position dans la liste d'éléments du même type.
p:nth-of-type(odd) {
color: blue;
}
:nth-of-type(n)
Cible un élément lorsque l'utilisateur clique dessus.
button:active {
transform: translateY(1px);
}
:not(selector)
Cible les éléments de formulaire qui sont cochés.
input[type="checkbox"]:checked + label {
font-weight: bold;
}
:visited
Cible les liens déjà visités par l'utilisateur.
a:visited {
color: purple;
}
::before
Insère du contenu avant le contenu de l'élément sélectionné.
p::before {
content: "Avant ";
}
::after
Insère du contenu après le contenu de l'élément sélectionné.
p::after {
content: " Après";
}
::first-line
Stylise la première ligne d'un élément de bloc.
p::first-line {
font-weight: bold;
}
::first-letter
Stylise la première lettre d'un élément de bloc.
p::first-letter {
font-size: 150%;
}
::selection
Stylise le texte sélectionné par l'utilisateur.
::selection {
background-color: yellow;
color: black;
}
::placeholder
Stylise le texte de l'attribut placeholder d'un élément input.
input::placeholder {
color: gray;
}
::marker
Stylise le marqueur d'une liste.
li::marker {
color: red;
}
::backdrop
Stylise le fond derrière un élément avec un contenu superposé, comme une modale.
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
::before et ::after avec contenu généré
Insère du contenu généré avant ou après l'élément sélectionné.
button::before {
content: "\2713"; /* Insertion d'un symbole de coche */
}
::nth-letter(n)
Stylise la n-ième lettre d'un élément de bloc.
p::nth-letter(3) {
color: blue;
}
Ces pseudo-classes et pseudo-éléments sont largement utilisés pour styliser des éléments HTML de manière précise et sophistiquée.
Les sélecteurs avancés en CSS permettent un contrôle plus précis sur le style des éléments dans une page web, en fonction de divers critères tels que la structure du document, les interactions de l'utilisateur ou les attributs des éléments. Ils sont essentiels pour créer des mises en page complexes et des designs sophistiqués.
Exercices
Exercice 1 : Utilisation des Pseudo-classes CSS
Vous disposez d'une liste d'étudiants répartis en deux groupes, A et B. Chaque groupe est représenté par une section avec un titre et une liste d'étudiants. Chaque étudiant est contenu dans un élément code < li > avec la classe .etudiant; contenant son nom,prenom et age.
Tâche :
- Utilisez les pseudo-classes CSS appropriées pour styliser les groupes A et B différemment.
- Appliquez un style différent au deuxième étudiant de chaque groupe.
- Appliquez un style de survol lorsque l'utilisateur survole chaque étudiant.
- Appliquez un style différent au groupe B s'il contient des étudiants ayant une certaine classe, par exemple .excellent.
- Excluez certains étudiants de l'application d'un style particulier, par exemple, n'appliquez pas de style au dernier enfant de chaque groupe.
Exercice 2 : Utilisation des Pseudo-elements CSS
Vous travaillez sur une application de blog où les utilisateurs peuvent consulter des articles sur différents sujets; chaque sujet est contenu dans une balise article et chaque article est dans une liste li avec un titre . Pour améliorer l'apparence et la convivialité de votre application, vous avez décidé d'ajouter des styles décoratifs aux titres et aux descriptions des articles dans la liste.
- personnaliser les marqueurs de liste des articles en ajoutant des icônes ou des couleurs en fonction de la catégorie de l'article.
- ajouter un symbole d'attention avant les titres des articles qui ont une priorité élevée ou qui sont mis en évidence.
Cette leçon est terminée. Vous pouvez la trouver au format PDF ci-dessous. Merci.
LECON 4 (PDF)
Trouver des Exercices et des Tutorielles ICI
About BKOI SCHOOL
Qu'est-ce que BKOISCHOOL ?
Nous créons des expériences d'apprentissage simplifiées et interactives. L'apprentissage du développement web devrait être facile à comprendre et disponible pour tout le monde, partout ! BKOI SCHOOL est une école pour les développeurs web, couvrant tous les aspects du développement web :
BKOI SCHOOL a été créé en 2024 et tire son nom de la capitale du MALI BAMAKO (BKO).