L’utilisation excessive de classes dans le HTML peut rendre le code désordonné et difficile à lire.
Cela complique la maintenance et la gestion du code, surtout à mesure que le projet grandit.
L’article propose d’explorer des sélecteurs CSS avancés qui permettent d’appliquer des styles précis sans ajouter de classes supplémentaires.
Lancez votre carrière de développeur web avec une formation pratique.
Introduction aux sélecteurs CSS
Afin d’éviter d’ajouter beaucoup de sélecteurs de classes dans votre code HTML, et le rendre plus organisé et lisible, CSS propose des sélecteurs qui permettent de cibler des éléments spécifiques sans avoir besoin de leur attribuer des classes ou des identifiants. Les sélecteurs d’enfants (>) ou les pseudo-classes comme : nth-child .
Syntaxe des sélecteurs d'enfant CSS
Prenons le code de l’exemple précédant :
On Suppose que nous voulons mettre tous les <p> en bleu, le premier <p> à l’intérieur de la <div> en marron, le deuxième <p> à l’intérieur de la <div> en rouge.
<body>
<h1>Titre de la page</h1>
<p>paragraphe 1</p>
<p>paragraphe 2</p>
<div>
<p>paragraphe 3</p>
<p>paragraphe 4</p>
</div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
CSS:
p {
color: blue;
}
div p:nth-child(1){
color: brown;
}
div p:nth-child(2){
color: red
- Div p :nth-child(1) : Ce sélecteur cible le premier paragraphe qui est un enfant direct de <div>
- Div p :nth-child(2) : De la même manière, ce sélecteur cible le deuxième paragraphe enfant direct de <div>
Voici le résultat sans recourir à l’utilisation de classe :
Voici un autre exemple avec un sélécteur d’enfant (>) avec le même code HTML :
body > p {
color: blue;
}
div > p {
color: orange;
}
Résultat :
Figure 2 : utilisation sélecteurs d’enfant (>).
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment utiliser les sélecteurs d'enfant en CSS?
Qu'est-ce qu'une pseudo-classe CSS nth-child?
Quels sont les avantages d'utiliser les sélecteurs CSS?
Comment appliquer différents styles à des éléments similaires?
Comment éviter les classes redondantes dans mon code HTML?
Conclusion
En utilisant intelligemment les sélecteurs CSS, vous pouvez garder votre code HTML propre et efficace. Quelle autre technique CSS pourrait encore simplifier votre processus de développement?
