cssのセレクタの指定方法について教えて下さい。

Question

基礎的な質問なんですが… ①タグにidやclass名がついてる場合、セレクタは必ずタグ名ではなくidやclass名で指定する、という認識で正しいんですか？ ▼例html

ああああ

▼css ◯正しい .example { color: #fff; } ▼css ✖間違ってる p { color: #fff; } ②子孫セレクタは全ての先祖から指定する必要があるんですか？例えば下記のhtmlコードの、li要素の文字色を指定したい場合、ⒶとⒷどちらが本来の正しい記述なんでしょうか？ ▼html

～以下省略～

▼cssⒶ .box li { color: #000080; } ▼cssⒷ #wrapper header .box li { color: #000080; }

naokita · Accepted Answer

①　いいえ
＞▼css ✖間違ってる
＞p {
でもあってるけど、それだと全部のPに適用される。それでも問題ないよ。
特定のPだけ適用するには、
.example { color: #fff;}
p.example { color: #fff;}
どちらかにするだけ。また詳細度（優先度）の問題もある。

どちらも指定する場合はあるよ（通常は黒で、特定が白とかね）
p{ color: #000;}
p.example { color: #fff;}

ただ、P以外を「白」にしたい場合も想定できるであるだろうから、その場合には、
.example { color: #fff;}
だけにした方が良い場合もあるし・・・
それは管理者の便利な方法でわかりやすい設定にするしかないかな。お好きなようにとしか言えません。

----------------------

②　どちらでも良いし、どちらも正しいよ
これも①と同じで、便利な方や、詳細度が高くなれば良いだけ。

複数ある場合で、区別したい場合には、詳細度を高くしないとダメだからね。

header .box li {color: red;}
.box li { color: #000080;}
footer .box li { color: blue;}

デフォルト（基本型として全適用）で利用もしたいし、更に特定部分だけを変えたいが為に、どちらも必要だし、どちらとも利用します。

---
見たところ、②はグローバルメニューのような気がしますが、
そこの色を変えたい場合には、それじゃ変わらないよ・・・　a が必要
header .box li a{ color: #000080;}
header .box li.nav1 a{ color: red;}
等にしましょう！

--------------------

まあ、なんだかんだ机上の理論よりも、
セレクタなんてどう書こうが本人が理解した上で、便利だったり、それで適用されれば良いのです・・・
（ただし、管理を共有する場合には、スキルを疑われたり、汚いと迷惑掛けます）

naokita · Answer

#3です　お礼拝見済みそういうのは、悩んだり頭で考えるよりも、試せば答えが出るでし早い・・・更にいろんなパターンを作ればそれが知識にもなるし、それらを自由に応用出来るようになります。 ---------- ＞1. ＞liタグでは駄目で、aタグだと効果が適用される理由を教えて下さい。 A, それは、

ああああいいいい

の想定の場合に、liとaのセレクタが違うからです・・・＞header .box li.nav1 a img { color: red;} ＞のように記述するのでしょうか？ A, 理屈はその通りですが、画像にcolorを指定しても無意味ですｗ＞2. >header .box li. nav1 a { color: red;} ＞上記のコードの、↑「li」の部分は無くても適用されますよね？（同じheader内に他にnav1が無ければ） A, その前に、 header .box li. nav1 a { color: red;} header .box li.nav1 a { color: red;} は違うから、質問になっていないけど・・・はい、以下のどれでも良いです！（詳細度の問題） header .box .nav1 a { color: red;} header .nav1 a { color: red;} .box li.nav1 a { color: red;} .box .nav1 a { color: red;} li.nav1 a { color: red;} .nav1 a { color: red;}

Gen_bamboo · Answer

本来というものは正直ありません。コードのメンテナンス性や可読性が考慮されていて、設計意図に合う動きをするなら問題ないのではないでしょうか。回答としては、②で先祖全て指定するのが面倒だから、 ①のようにClassやIdが存在すると考えてください。また、適当にどこかからの相対指定にした場合は、当てはまるものすべてに適用されます。「index.html」　　

「main.css」例１）div p{} 例２）#bb,#aa,#cc{} 例３）.dd{} これらの例はどれも同じ結果になります。 ※インデントのために全角空白文字を使っているのでコピペはしないでくださいね。参考に「CSS　セレクタ　チートシート」で検索してみてください。 https://webliker.info/css-selector-cheat-sheet/ それと１次情報を確認するのを忘れないでくださいね。 https://www.w3schools.com/css/ https://developer.mozilla.org/ja/docs/Web/CSS

Tacosan · Answer

(2) の方, li タグに class が付いてるんだけどクラス名ではなく要素名で指定してるよね. (1) の「タグにidやclass名がついてる場合、セレクタは必ずタグ名ではなくidやclass名で指定する、という認識」と矛盾するよ.

まあ「何を指定したいのか」で決めればいいわけであって, 「こうしなければならない」という規則はないんだけど.

cssのセレクタの指定方法について教えて下さい。

① いいえ

#3です お礼拝見済み

本来というものは正直ありません。

(2) の方, li タグに class が付いてるんだけどクラス名ではなく要素名で指定してるよね. (1) の「タグにidやclass名がついてる場合、セレクタは必ずタグ名ではなくidやclass名で指定する、という認識」と矛盾するよ.

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

①　いいえ

#3です　お礼拝見済み