Types de sélecteurs
Types de sélecteurs
Types de sélecteurs est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 1 leçons au total.
Introduction
Bonjour,
Dans cette leçon, nous approfondirons nos connaissances en CSS avec des sélecteurs plus complexes.
Définition de plusieurs styles
Nous pouvons créer plusieurs définitions de style en plaçant des points-virgules entre chaque style.
.first{
color:blue;
font-size:20px;
text-align: center;
}un document HTML qui devient plus complexe
Jusqu’à présent, nous avons travaillé avec des sélecteurs de balise, d’ID et de classe simples. Cependant, dans certains cas, lorsque l’interface utilisateur devient complexe, nous devons utiliser des sélecteurs plus complexes.
Dans l’exemple ci-dessous, nous avons un document HTML qui devient plus complexe.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>Analyser l’exemple
Analysons maintenant notre code.
- Un div avec l’ID my-area sert de conteneur dans le corps de la page. Il est l’ancêtre de tous les éléments situés sous ce div.
- L’élément p avec la classe first est le frère de l’élément div avec la classe second.
- Le troisième élément est l’enfant du deuxième élément, et l’élément my-area peut être considéré comme l’ancêtre du troisième élément.
Avertissement
Vous pouvez considérer la structure HTML comme un véritable arbre généalogique.
Vous pouvez hériter génétiquement d’un grand-père.
Mais si cet héritage change chez votre père, le gène du père sera plus dominant et le trait hérité de votre grand-père changera.
Combinaisons de sélecteurs
Voyons maintenant comment combiner les sélecteurs.
La déclaration suivante indique que l’élément ayant la deuxième classe est un descendant (enfant ou petit-enfant) de l’élément ayant la troisième classe.
Lorsqu’il y a un espace entre les deux classes, cela signifie que la classe de gauche recherche un descendant.
.second .third{
color:red;
}Sélecteur d’enfant
Dans l’exemple ci-dessous,
cela signifie de sélectionner la troisième classe, qui est l’enfant de la deuxième classe.
Le signe supérieur à signifie de sélectionner l’enfant de l’élément concerné.
.second > .third{
color:red;
}Nous pouvons combiner un sélecteur de balise et de classe pour sélectionner un élément
Nous pouvons également combiner un sélecteur de balise et de classe pour sélectionner un élément.
L’exemple ci-dessous sélectionnera les éléments p ayant la troisième classe.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Supposons que nous voulions sélectionner un div avec la première classe
Supposons que nous voulions sélectionner un div avec la première classe.
Dans l’exemple ci-dessous, cela signifie sélectionner l’élément ayant la première classe, qui est l’enfant de l’élément div avec l’ID my-area.
Cela augmente la spécificité de l’élément à sélectionner.
div#my-area > .first{
color:red;
}Tout sélectionner
Le signe astérisque (*) est important parmi les sélecteurs.
Il signifie de tout sélectionner.
Dans l’exemple ci-dessous, le sélecteur indique que l’élément ayant l’ID my-area doit sélectionner tous ses descendants.
Le point à retenir ici est qu’il ne s’agit pas seulement des enfants, mais de tous les descendants.
Si nous voulions sélectionner uniquement les enfants, nous devrions placer le signe supérieur à avant l’astérisque.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Sélecteur de frère adjacent
Nous avons utilisé le sélecteur de descendant et le sélecteur d’enfant. Apprenons maintenant le sélecteur de frère.
Le sélecteur de frère utilise le signe + pour sélectionner le frère suivant.
Dans notre exemple, la couleur d’arrière-plan du troisième élément paragraphe sera rendue jaune par le sélecteur.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Sélecteur de frères généraux
Si nous voulons sélectionner non seulement le premier frère suivant, mais tous les frères qui le suivent, nous utilisons le signe tilde (~).
Le symbole tilde est également connu sous le nom de combinateur de frères suivants.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Pseudo-classes et classes CSS
Les expressions qui ne sont pas des classes, mais qui se comportent comme des classes, sont appelées des pseudo-classes.
Nous ne définissons pas les pseudo-classes sur les éléments HTML.
Lorsque le navigateur interprète le code, il suppose qu’elles existent. Nous pouvons donc utiliser les pseudo-classes dans les sélecteurs CSS.
La pseudo-classe :hover
Parmi les pseudo-classes, :hover est sans aucun doute la plus connue.
Hover (:hover) est une pseudo-classe automatiquement définie par le navigateur pour l’élément concerné lorsque la souris le survole.
Les pseudo-classes sont utilisées après le symbole deux-points (:) dans la déclaration du sélecteur.
La syntaxe d’utilisation d’une pseudo-classe est illustrée ci-dessous.
selector:pseudo-class {
property: value;
}Styliser les liens avec :hover
Créons maintenant un lien et voyons à quoi il ressemblera lorsque vous le survolerez.
Avertissement : comme les appareils mobiles ne disposent pas d’un événement de survol comme sur le Web, cet effet ne sera pas visible dans les applications mobiles Coddykit.
Dans l’exemple ci-dessous, observons que lorsque nous survolons le lien avec la souris, sa couleur devient verte.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>Pseudo-classe :first-child
L’une des pseudo-classes les plus déroutantes est :first-child.
En général, lorsque nous regardons son nom, nous pouvons en déduire qu’elle sert à sélectionner le premier enfant d’un élément.
En réalité, cette déduction est incorrecte.
Elle sert à sélectionner le premier élément parmi les frères et sœurs de l’élément.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudo-classe :last-child
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudo-élément ::before
Si nous voulons ajouter quelque chose avant un élément, nous utilisons le pseudo-sélecteur ::before.
Dans l’exemple ci-dessous, nous avons ajouté le contenu « Hello » avant les éléments d’en-tête.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Pseudo-élément ::after
Le pseudo-élément ::after, qui est l’opposé du pseudo-élément ::before, sert à ajouter du nouveau contenu après l’élément.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Liste des pseudo-classes
Nous avons étudié les pseudo-classes les plus utilisées. Cependant, il en existe des dizaines d’autres.
Vous pouvez accéder à la liste de toutes les pseudo-classes grâce au lien ci-dessous. Vous pouvez utiliser celle dont vous avez besoin.
Félicitations
Félicitations 🎉
Dans cette section, nous avons étudié les types de sélecteurs.
Dans la prochaine section, nous découvrirons les propriétés CSS les plus utilisées
Questions Fréquemment Posées
La leçon « Types de sélecteurs » est-elle gratuite ?
Oui — le texte complet de « Types de sélecteurs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Types de sélecteurs » ?
Types de sélecteurs Tu pratiques HTML for Kids avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Types de sélecteurs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML for Kids ?
Oui. Chaque leçon HTML for Kids inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.