Trouver un div intitulé "truc" (par exemple) via l'inspecteur

Le problème exposé dans ce sujet a été résolu.

Hello !!!

De retour après quelques mois de repos forcé :B

Je me remets tout doucement au "développement" et une chose m’est totalement étrangère (wooohaaa la honte !), c’est l’inspecteur.

Je cherche depuis un moment deux sélecteurs dans mes fichiers CSS, sans succès :B

Je sais qu’il y a un moyen, si le site est en ligne, de trouver via l’inspecteur ce que l’on cherche.

Quelqu’un pourrait-il me donner la marchez à suivre ?

Merci beaucoup et bonne soirée :B

PLS

+0 -0

Salut ! Ça dépend si tu recherches dans le HTML ou dans le CSS.

Les captures ci-dessous sont sous l’inspecteur de Firefox mais les autres inspecteurs sont normalement similaires.

Si c’est dans le HTML que tu veux te retrouver, tu peux taper un sélecteur CSS dans la barre de filtre de l’inspecteur HTML, là où on peut consulter et interagir avec l’arbre HTML. Par exemple si je cherche la liste de liens de saut d’accessibilité sur la présente page, je peux chercher ul#accessibility. Firefox auto-complète les sélecteurs, j’imagine que les autres aussi.

Capture d'écran de l'inspecteur de Firefox, sur l'onglet “Inspecteur”. Le champ de recherche a le focus, et on y a entré le sélecteur CSS “ul#accessibility”.En dessous, l'arbre HTML est centré sur la liste correspondante, le nœud précis étant sélectionné.

Bien entendu, s’il y a plusieurs éléments correspondant, on pourra aller de l’un à l’autre (essayer avec div.mobile-menu-bloc sur cette page).

Depuis l’inspecteur, on peut retrouver le CSS associé ainsi que dans quel fichier le CSS a été écrit (c’est écrit en regard du sélecteur). Si les fichiers map sont publiés, on peut même voir les fichiers originaux avant compilation, le cas échéant. Des boutons permettent d’afficher les styles lors d’événements (:hover, :focus, …, sur Firefox c’est le bouton :hov en haut à droite) ou si le thème est sombre ou clair (boutons avec Soleil et Lune, à côté).

Aperçu de la partie CSS de l'inspecteur HTML. On est sur l'onglet Règles. En haut, un filtre des styles, et des boutons :hov, .cls, plus, étoile, lune, et copier. Dessous, un accordéon fermé “Pseudo-éléments”. Enfin, dessous, la liste du CSS appliqué à l'élément sélectionné (le même qu'au dessus), présenté comme du CSS classique, avec en regard les noms des fichiers dans lesquels ils sont écrits (respectivement _base.scss et _accessibility-bar.scss).

Finalement, tu as l’onglet Inspecteur de styles, qui liste tous les fichiers CSS de la page et permet de les explorer, de les modifier, de les activer ou désactiver entièrement, et de les formater.

Cela dit, cette section ne permet pas de se lier au HTML facilement, ni de retrouver où un sélecteur spécifique est défini. Pour cela, le mieux est de retrouver le sélecteur dans l’inspecteur HTML, comme plus haut, et l’intégralité du CSS associé à ce sélecteur sera présenté à côté de l’élément HTML sélectionné.

En espérant que cela puisse être d’une quelconque aide :) .

+3 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte