CSSコーディングの際に…

質問

CSSコーディングの際に…

たとえば
<div id="container">
<div id="main">
<div id="menu">
<div id="info">
</div>
</div>
</div>
</div>
のようなhtml構造がって

たとえば #info に何らかのCSSを適用したい場合に、

#container #main #menu #info {
font-weight: bold;
}

などと書く場合があると思うのですが、
この例でいえば、#info を内包するすべてのタグ構造や、そのid、classネーム（#container #main #menu）を
自動的に抽出してくれるようなツールや方法はないでしょうか。

意味不明でしたら加筆しますのでよろしくお願いします。

回答No.2

goldfox

idなら
div#info {～
で十分だと思うんですが……

お礼

すみません、これはあくまで例なので、そのあたりの意味は気にしなくていただきたく。。

#container #main #menu #info　のように連なる場合、という意味として、例を出した次第です。
なので、これがたとえば　#container #main #menu .info
であっても良いですし、、　そのあたりの意味は今回の質問には関係しないと
思っていただければ幸いです。

よろしくお願いします。

回答No.1

naokita

Firefox用アドオン（かなり便利）
https://addons.mozilla.jp/firefox/details/1843
これで、
HTMLを表示　→　表示タブ　→　左右に並べる
HTMLの <div id="info"> を見つけ div をクリックすると右にCSSが表示される。
それを検索で info を探しても同じ。
HTML側を見て内包・外包を見ればすぐにわかる。

って意味じゃなく？

お礼

ご回答ありがとうございます。

すみません、そういう意味じゃないです。。

firebugと本例を例に出すならば、

たとえば、本例のHTMLの <div id="info">
をクリックした瞬間に
#container #main #menu #info　という文字列が
クリップボードに格納されるとか。。

たとえば、そういう便利なツールは無いですか、という意味です。

意味不明でしたら加筆しますのでよろしくお願いします。