Les conflits de style en CSS peuvent rendre la gestion des design complexes.
Ces conflits entraînent souvent une incohérence visuelle et un comportement inattendu des éléments.
Cet article vous guide à travers la hiérarchie CSS, la cascade et la spécificité pour résoudre ces problèmes efficacement.
Lancez votre carrière de développeur web avec une formation pratique.
Comprendre la Hiérarchie CSS
L’objectif principale de cette partie est de mieux comprendre quelques concepts fondamentaux de CSS que sont la cascade, la spécificité et l’héritage. Tous les trois contrôlent la façon dont le CSS est appliqué au HTML et comment les éventuels conflits entre les déclarations de style sont résolus.
En CSS, la hiérarchie est très importante pour déterminer quel style s’applique lorsqu’il y a des conflits entre plusieurs règles de style. Elle se base sur l’ordre et la spécificité des sélecteurs pour décider quelle règle sera prioritaire.
Lorsque vous travaillez avec CSS, il est courant d’avoir des conflits entres les règles qui s’appliquent au même élément. Le mécanisme de la cascade, ainsi que la notion de spécificité, régissent quel style sera finalement appliqué.
Cascade CSS : Ordre et Priorité
Cet exemple illustre le cas ou deux règles sont appliquées à l’élément <h1>. Les deux règles proviennent de la même source et ont un sélecteur identique : elles ont la même spécificité et c’est alors la dernière règle, selon l’ordre du code source, qui l’emporte. C’est le principe de la cascade.
HTML :
<h1>Titre de la page</h1>
CSS :
h1{
color: blue;
}
h1 {
color: brown;
}
Résultat :
Spécificité CSS et Hiérarchie
Dans ce deuxième exemple, l’élément <h1> a à la fois un sélecteur de type (h1), un sélecteur de classe et un sélecteur d’ID. La règle la plus spécifique (le sélecteur d’ID) est appliquée, donc le titre sera coloré en rouge. C’est le concept de la spécificité : elle détermine quelle règle doit s’appliquer lorsqu’il y a des conflits entre des sélecteurs différents.
HTML:
<h1 class="title" id="id-title">Titre de la page</h1>
CSS:
h1 {
color: blue; /* Sélecteur de type */
}
.title {
color: brown; /* Sélecteur de classe */
}
#id-title {
color: red; /* Sélecteur d'ID */
}
Résultat :
Sélecteur | Identifiants | Classes | Eléments | Spécificité totale |
|---|---|---|---|---|
H1 | 0 | 0 | 1 | 0-0-1 |
.titre | 0 | 1 | 0 | 0-1-0 |
#id-title | 1 | 0 | 0 | 1-0-0 |
Sélecteurs CSS : Gérer les Conflits
Dans cette exemple on veut mettre la couleur des éléments p en bleu et celle qui sont à l’intérieur de div en marron.
HTML :
<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 {
color: brown;
}
Résultat :
Le problème vient de l’ordre et de la spécificité des règles CSS: div { color: brown; } la div affecte elle-même en changeant la couleur en marron. En revanche, cela ne change pas la couleur des paragraphes à l’intérieur. L’explication est que la propriété color pour affecte ses enfants, mais seulement si le texte à l’intérieur n’a pas déjà été modifié par une règle plus spécifique.
Afin que la couleur marron s’applique uniquement aux éléments <p> dans la <div>V ous devez spécifier davantage votre sélecteur CSS, ce qui signifie que vous devez utiliser un sélecteur combiné pour cibler uniquement les <p> qui sont à l’intérieur de la <div>.
CSS:
p {
color: blue;
}
div p {
color: brown;
}
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 la cascade CSS fonctionne-t-elle?
Qu'est-ce que la spécificité en CSS?
Pourquoi des conflits CSS surviennent-ils?
Comment résoudre les conflits de sélecteurs CSS?
Quel est le rôle des sélecteurs combinés en CSS?
Conclusion
La hiérarchie en CSS est essentielle pour résoudre les conflits de style. Quel aspect de la hiérarchie trouvez-vous le plus complexe dans vos projets?
