chromeのデベロッパーツールを使うときに、HTMLタグに付いているclass名の中身を見ようと思っても検索結果にでてきません。どうしたら見れますか？

Question

上記の画像のようにHTMLの一番上の行にある「product-link」というクラス名のプロパティなどを確認したいのですが、「Style」のところで画像のように検索をかけても出てきません。

このように、HTMLにはクラス名があるのにその中身が見れないということが頻繁にあるのですが、どのようにしたら見れるようになりますか？

Answer 1

ものによるんですが、そのclassにstyleが設定されていない場合は確認できないこともあると思います。
classはCSSを当てるためにあるのではなく、そのclassにCSSを当てているだけだからです。
あくまで様々な用途で付けられるHTMLのグローバル属性の1つ。

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class
クラスは CSS の クラスセレクター や JavaScript の DOM メソッド document.getElementsByClassName といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

用途はCSSだけではありません。

例えば以下のようになっている場合は、片方はStylesタブには出てきません。

<p class="test1">test1</p>  
<p class="test2">test2</p>  

.test1{
	color:red;
}

Comments

[sino3325]

ご回答ありがとうございます。
JavaScriptの方でもクラス名は使いますもんね。
ありがとうございます！