Mission

Mission : dénouer un conflit de spécificité sur une navbar

Calculer la spécificité de plusieurs règles concurrentes pour prédire et corriger l'affichage réel d'un lien de menu.

Contexte

Sur styles.css, trois règles ciblent le même lien de menu, qui a pour attributs class="item actif visible" et se trouve à l'intérieur d'un conteneur id="widgets" :

.sidebar .item { color: gray; }
#widgets .item.actif { color: blue; }
.widget .item.actif.visible { color: green; }

Le lien correspond aux trois sélecteurs à la fois. Avant d'ouvrir les DevTools, calcule toi-même laquelle de ces règles va réellement s'appliquer.