Web制作の修正をしています（VSCodeを使っています）。あるCSSがどのHTMLに影響を与えているかを知りたい

Question

十数ページあるファイルの修正をしています。
テキストエディタはVSCodeを使っています。

あるCSSがどのHTMLに影響を及ぼしているかを知りたいため、CSSからHTMLの該当部分を探す方法を知りたいです。

反対にHTMLからCSSへの参照は、拡張機能か何かを入れているため知ることはできるのですが（このクラスは、どのCSSファイルの何行目に記載されているかを表示してくれる）、反対にCSSからHTMLを参照する方法（たとえば「このCSSはindex.htmlのこの部分とtop.htmlのこの部分の双方に効いている」といったこと）はあるのでしょうか？
ファイル数は少ないですが、入り組んでいるし、同じセレクタのCSSがあったりするので、できるだけ自動的に判別できるような方法が望ましいです。

VSCode固有の機能でも良いし、VSCodeの拡張機能を入れる方法でも構いません。

方法をご存じの方のご教授をいただければと思います。
よろしくお願いします。

Answer 1

こちらの拡張機能を使う
https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation

• CSSセレクタでHTMLを検索

  エディタ内のシンボルへ移動(Ctrl+Shift+O)→CSSセレクタを指定

• HTMLファイルからその要素に影響のあるCSSに移動

  該当する要素を右クリック→定義へ移動

• CSSファイルから指定したセレクタが影響を与えているHTMLタグを検索

  該当するセレクタを右クリック→全ての参照を検索

Answer 2

虫眼鏡マークをおして、CSSのファイル名を入れて参照しているファイルを調べると良いかと思います

Comments

[cheshire-cat]

VSCodeの虫眼鏡マークを押すのも一つの手ですね。
虫眼鏡マークにたとえばクラス名を入れるとそれに対応したHTML、CSSファイルが出てきます。
そこから対象のHTML、CSSを調べるわけですが、この次はHTMLとCSSのどちらを調べるのでしょう？
まずHTMLからクラス名を探し、それからそのクラス名に対応したCSSを探す、という流れになるのではないでしょうか？
それは結局、HTMLからCSSを探す、という流れになっているのではないでしょうか？
虫眼鏡を使って、HTML、CSSを絞り込むのはいいと思うのですが、そこからまずCSSを探し、続いてそのCSSに対応したHTMLを探す、という流れで調査をする方法はないのでしょうか？

[utm.]

1. CSSファイルをどこが参照しているか調べる
2. CSSの調べたいセレクタ、クラスを1の手順で抽出したファイルで参照されているかを調べる

文章が分かりづらい、推敲して投稿して欲しい、読むだけですごく時間がかかる
コメント欄に書くのではなく質問文を編集して試したこと、問題点を加筆すればいい

Answer 3

[香車]東上☆Aho(暎帆)☆海美「
Web ブラウザのデバッグ機能(F12)を使ってみては ?
」

Comments

[cheshire-cat]

回答ありがとうございます。
F12を押す方法だと、現在Webに表示されているファイルしか検索できないと思うのです。
そのCSSは確かに現在webに表示されているHTMLのCSSでもあるけれど、一方で現在webに表示されないHTMLのCSSでもあったりします。
そのため現在Webに表示されていないHTMLまで検索するためには、Webブラウザからの検索では難しいのではないでしょうか？