Maîtrise des sélecteurs CSS pour un code propre

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.

Table de matière

Introduction aux sélecteurs CSS Syntaxe des sélecteurs d'enfant CSS FAQ Conclusion

Formation HTML et CSS : Le Guide du Débutant

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>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"dd61cd433a","url":"https:\/\/blog.alphorm.com\/selection-css-code-propre","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><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?

Les sélecteurs d’enfant CSS, représentés par le symbole ‘>’, permettent de cibler uniquement les éléments qui sont des enfants directs d’un élément parent. Par exemple, ‘div > p’ cible uniquement les paragraphes qui sont enfants directs des div, sans affecter ceux qui sont plus profondément imbriqués. Cela vous aide à appliquer des styles précis sans avoir besoin de classes supplémentaires, ce qui rend votre code HTML plus propre et facile à gérer.

Qu'est-ce qu'une pseudo-classe CSS nth-child?

La pseudo-classe CSS nth-child permet de sélectionner un ou plusieurs éléments en fonction de leur position parmi leurs frères et sœurs. Par exemple, ‘div p:nth-child(1)’ cible le premier paragraphe enfant d’une div. Cette fonctionnalité est utile pour appliquer des styles spécifiques à des éléments sans avoir à les identifier avec des classes ou des ID, simplifiant ainsi le code CSS et HTML.

Quels sont les avantages d'utiliser les sélecteurs CSS?

L’utilisation des sélecteurs CSS offre plusieurs avantages, notamment la réduction de la dépendance aux classes et IDs dans votre HTML, ce qui simplifie le code et améliore sa lisibilité. Les sélecteurs permettent également une application plus précise et flexible des styles, facilitant la maintenance et l’évolution du code au fil du temps, sans avoir à modifier le balisage HTML de base.

Comment appliquer différents styles à des éléments similaires?

Pour appliquer différents styles à des éléments similaires sans ajouter de classes, utilisez des sélecteurs avancés comme les pseudo-classes nth-child. Par exemple, pour styliser différemment deux paragraphes dans une div, vous pouvez utiliser ‘div p:nth-child(1)’ pour le premier paragraphe et ‘div p:nth-child(2)’ pour le second. Cela permet d’appliquer des styles spécifiques basés sur la position, rendant votre code plus modulaire et propre.

Comment éviter les classes redondantes dans mon code HTML?

Pour éviter les classes redondantes dans votre code HTML, utilisez les sélecteurs CSS avancés tels que les sélecteurs d’enfant et les pseudo-classes. Ces outils permettent de cibler des éléments spécifiques sans avoir besoin de classes supplémentaires. Cela réduit l’encombrement du HTML et améliore la lisibilité et la maintenance du code. Les sélecteurs CSS offrent une manière efficace de gérer le style de votre site tout en gardant le balisage HTML minimal.

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?