CSSのセレクタの指定方法

質問

基本的なところで恐縮です。
ひさびさに他人が作ったHTML＆CSSをいじっていたら混乱してきました。たとえば以下のようはHTMLがあったとします。
--
<ul id="gmemu">
<li>hoge1</li>
<li>hoge2</li>
</ul>
--
このとき、ul、liタグのスタイルを定義したいときのセレクタの指定の仕方としてはどちらが正しいのでしょうか？

■その1（ID名 タグ名）
#gmenu ul{
}

#gmenu li{
}

■その2（タグ名 ID名）
ul#gmenu{
}

ul#gmenu li{
}

かなり初心者入ってますが、教えていただければ幸いです。
よろしくお願いします。

回答No.1

abril · ベストアンサー

(1)
> #gmenu ul{}

×です。これだと、"gmenu"という値のid属性を持った親要素の子孫のul、という意味になります。

(2)
> #gmenu li{}

○です。liの親要素のulが"gmenu"という値のid属性を持っているので。

(3)
> ul#gmenu{}

○です。"gmenu"という値のid属性を持ったul、という意味なので。

(4)
> ul#gmenu li{}

○です。"gmenu"という値のid属性を持ったulの子要素のliとなるので。

ということで、一般的なのは(3)と(4)の組み合わせではないでしょうか。
（※他の要素に対してgmenuというidを使用していなければ、ul（タグ名）を省略して単に#gmenuと#gmenu liというセレクタでも可能ですが。）

お礼

さっそくありがとうございます！
激しく混乱していましたが分かりやすい説明でだいぶスッキリしました。
ということは、逆にHTMLが以下のような場合は(1)(2)で書くのが正しいということですね？
<div id="gmenu">
<ul>
<li>hoge1</li>
<li>hoge2</li>
</ul>
</div>

回答No.3

ORUKA1951

idは基本的にその文書に一箇所しか現れませんから、
#gmenu と ul#gmenu はまったく同じ要素を指定しますから、どちらも正しい。・・とっいって良いでしょう。
正確に言うと、いずれもCSSの詳細度は[1]になります。
#gmenu : 1=1
ul#gmenu : 0+1=1

ただし、スタイルシート全体のチェックのしやすさからすると
ul#gmenu という風に統一したほうがよいかもしれませんが、それは流儀の部分になります。
　たとえばclassで指定する場合、他の場所で
div#page_list ul.cite{}
div#page_list p.cite{}
と記述する場合に、
div#page .icon
　と記述するより
div#page p.icon{}
　としたほうが統一性が取れて、後からのチェックがしやすいと（作者が）思う場合とかですね。

回答No.2

abril

> 逆にHTMLが以下のような場合は(1)(2)で書くのが正しいということですね？
> （省略）

○です。その他にも、
(1)は
div#gmenu ul {}
(2)は
#gmenu ul li {}　又は　div#gmenu ul li {}　又はdiv#gmenu li {}
という記述に置き換える事も可能です。

お礼

ご丁寧にありがとうございました。
おかげさまで絡まっていた糸がほどけてきました。
あとは書籍を読むなりして知識を補っていこうと思います。
ありがとうございました。