質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

16808閲覧

CSSで深い階層にあるidセレクタを指定する際にどこまで書けばいいのか

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2016/07/11 05:37

###迷っていること

初めて質問させていただきます。
CSSでセレクタをどこまで指定すべきか迷うことがあります。

例えば次のような場合

<article id="site"> <section id="site1sec"> <table id="site1secTable"> <tr> <th></th><td></td> </tr> <tr> <th></th><td></td> </tr> </table> </section> </article>

イメージ説明
この場合のthやtdのCSSを書こうと思ったときに、

#site #site1sec #site1secTable td{ background: #fff;}

ここまで書かないといけないでしょうか?
それとも、この場合は最後の子孫もidセレクタなので
どうせページの中には一度しか出てこないから
途中までのセレクタ指定を飛ばして

#site1secTable td{ background: #fff;}

と簡略化してもいいのでしょうか?(あるいはそうした方がいいのか)
それともこの場合、一番外郭にあたる#siteだけは書いた方がいいとか
そういうルールってあるのでしょうか?
また、#site以下のセレクタがclassセレクタであった場合
また方法は違ってくるのでしょうか?

###補足情報

セレクタの指定自体はこれで利くように思えるのですが、
セマンティクス的にはどうなのでしょうか?

あまり冗長になりすぎると煩雑になってしまうし
かといって指定を飛ばすことでCSSが利かなくなってしまったら
元も子もないし、ということで迷っています。

拙い質問で恐縮ですが、ご教授お願いいたします。

ikuwow👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

基本的にはひとつ上のIDを利用するだけでいいと思います。
というより、上の階層のIDまで指定してしまうと、詳細度が上がりすぎて取り回しがしづらくなると思います。

とした上で、さらに言うと。
そもそもIDを使うこと自体、避けたほうがよいケースが多いです。
なぜなら、上でも書いたように「詳細度が高くなりすぎる」からです。

なので、途中でデザイン変更などが発生してちょっとだけCSSを修正しようとしても詳細度が邪魔してすぐに変更できない、みたいなことがありえます。
なので、スタイルに関するものはすべてclassにしておき、IDはページ内リンクだったり、といった用途に限定して使用するのがいいかな、と思います。

そしてそうすると、自然と詳細度の問題からどの程度入れ子にしておくといいか、というのも見えてくるのではないかなと。

投稿2016/07/11 06:29

edo_m18

総合スコア2283

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/11 07:43

「詳細度」とか、のちの取り回しの可能性のためにclassセレクタを使うという考え方は持っていなかったので目から鱗でした。質問して本当によかったです。 ページの中でその要素が単一の要素か、複数回使う要素か、という視点だけでセレクタを選ぶとidセレクタが多くなってきてしまい(そうしなければいけないと思っていた)、漠然と不安があったのでとてもすっきりしました。本当にありがとうございました。
guest

0

#site tdでも#site1sec tdでも#site1secTable tdでも効きます。
この中で一番優先されるのは#site1secTable tdになります。

指定する要素の親が一番優先され、離れるほど優先度が下がっていくわけですね。

一番外の要素に指定する利点は、
子孫に同じ要素が複数存在する場合、その全てにCSSを反映できることですかね。

投稿2016/07/11 05:48

編集2016/07/11 05:52
Yasha_Wedyue

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/11 07:47

参考になりました。ご回答ありがとうございます。
guest

0

idを使わない方が良い理由が明確にあります。
JavaScriptの

javascript

1document.getElementById('foo');

がDOM取得手法の中で一番高速なのに対して、
CSSでIDを利用してしまっているため、JavaScript用にIDを利用できないというデメリットがあります。

IDは1ページの中で1つしか設定できない(別の名前のIDであればいくらでも設定できます)ので、
CSSにIDを使うことを反対する方が多いです。


どれだけ深い階層のセレクタが良いかと言うと、
親子関係を考えてみると良いです。

例えばulに対して、子要素はliしか存在しないはずなので、

html

1<ul class="foo"> 2 <li>bar<li> 3</ul> 4 5<style> 6.foo > li { 7 ... 8} 9</style>

という構成が成立します。

css

1.foo li { 2 ... 3}

とした場合は孫要素まで見てしまうので、関係が崩れてしまいます。

良く使うボックスに、共通の見出しや段落を設定して、
使い回しやすくする場合は

html

1<section class="box"> 2 <h2>Subject</h2> 3 <p> 4 Consectetur vel fugiat aperiam suscipit magnam quia pariatur consequatur. 5 </p> 6 <p> 7 Consectetur vel fugiat aperiam suscipit magnam quia pariatur consequatur. 8 </p> 9</section> 10 11<style> 12 .box > h2 { 13 ... 14 } 15 16 .box > p { 17 ... 18 } 19</style>

とした方が良い場合もありますし、場合によったりもします…
あまり深いセレクタになる場合は文書構造を見直してみると良いです。

私は3階層ぐらいまでしかセレクタは繋げません。
あまり深くなるようなら、文書構造もしくはデザインからみなおして、
よりシンプルに実装できる状態にします。

複雑すぎるデザインは現代ではあまり需要がないので、
その時代に合わせてCSSの書き方も変わってきます。

投稿2016/07/14 10:09

thrbrd

総合スコア43

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問