La barre Web Developer (2)

Dans un article précédent, je vous ai présenté la barre Web Developer (module complémentaire pour Firefox permettant de faire des modifications virtuelles sur nos CSS). Une autre des propriétés de la barre Web Developer est de pouvoir pointer n'importe quel élément d'une page web pour en obtenir la classe CSS correspondante. C'est-y pas génial, ça ?

¤¤¤

Pour ceux qui n'aiment pas surcharger leur barre d'outils pour n'avoir que l'essentiel sous les yeux, on accède à cette fonction de la barre Web Developer via l'onglet Outils ===> Web Developer  ===> CSS ===> View Style Information

Et pour ceux qui veulent tous leurs outils à portée de clic et ont affiché la barre Web Developer dans leur barre d'outils, il suffit de cliquer sur l'onglet CSS ===> View Style Information

Une fois que vous avez sélectionné cette propriété de la barre Web Developer, il ne vous reste plus qu'à pointer un élément de votre page pour voir s'afficher les classes CSS lui correspondant.

Un exemple ci-dessous :
J'ai pointé le curseur de ma souris sur un lien dans un article. La barre Web Developer m'affiche une ligne d'informations sur l'élément.
Pas de panique ! Dans certains cas, la ligne peut paraître longue mais c'est parce que Web Developer part de la classe CSS la plus généraliste dans laquelle l'élément est présent et par effet d'entonnoir, isole et cible avec précision l'élément en question.
On se s'intéressera donc qu'au dernier voire aux deux derniers attributs de l'élément pointé.



Dans mon exemple, pour modifier l'aspect de mes liens dans les articles, il me faudra donc jouer sur la classe :
.contenuArticle a {}