![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?c9bd177)
基礎的な質問なんですが…
①タグにidやclass名がついてる場合、セレクタは必ずタグ名ではなくidやclass名で指定する、という認識で正しいんですか?
▼例html
<p class="example">ああああ</p>
▼css ◯正しい
.example {
color: #fff;
}
▼css ✖間違ってる
p {
color: #fff;
}
②子孫セレクタは全ての先祖から指定する必要があるんですか?
例えば下記のhtmlコードの、li要素の文字色を指定したい場合、ⒶとⒷどちらが本来の正しい記述なんでしょうか?
▼html
<body>
<div id="wrapper">
<div id="header">
<h1>ああああ</h1>
<ul class="box">
<li class="nav1"><a href="aaaaaa">ああああ</a></li>
<li class="nav2"><a href="aaaaaa">ああああ</a></li>
<li class="nav3"><a href="aaaaaa">ああああ</a></li>
</ul>
<!-- #header --></div>
~以下省略~
<!-- #wrapper --></div>
</body>
▼cssⒶ
.box li {
color: #000080;
}
▼cssⒷ
#wrapper header .box li {
color: #000080;
}
No.3ベストアンサー
- 回答日時:
① いいえ
>▼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;}
等にしましょう!
--------------------
まあ、なんだかんだ机上の理論よりも、
セレクタなんてどう書こうが本人が理解した上で、便利だったり、それで適用されれば良いのです・・・
(ただし、管理を共有する場合には、スキルを疑われたり、汚いと迷惑掛けます)
回答ありがとうございます!
すみません2点教えて頂きたいのですが、
1.
>見たところ、②はグローバルメニューのような気がしますが、
そこの色を変えたい場合には、それじゃ変わらないよ・・・ a が必要
liタグでは駄目で、aタグだと効果が適用される理由を教えて下さい。
変化させたいのはli要素だから、liで指定出来ると思ったんです。
それとも、②のli要素において一番の子孫はaタグになるのでしょうか?
そうなると、もし下記のようにimgタグが記述されている場合、
<li class="nav1"><a href="aaaaaa"><img src="bbbbbb" alt=""></a></li>
header .box li.nav1 a img { color: red;}
のように記述するのでしょうか?
2.
>header .box li. nav1 a { color: red;}
上記のコードの、↑「li」の部分は無くても適用されますよね?(同じheader内に他にnav1が無ければ)
No.4
- 回答日時:
#3です お礼拝見済み
そういうのは、悩んだり頭で考えるよりも、試せば答えが出るでし早い・・・
更にいろんなパターンを作ればそれが知識にもなるし、それらを自由に応用出来るようになります。
----------
>1.
>liタグでは駄目で、aタグだと効果が適用される理由を教えて下さい。
A,
それは、
<li class="nav1">ああああ<a href="aaaaaa">いいいい</a></li>
の想定の場合に、liとaのセレクタが違うからです・・・
>header .box li.nav1 a img { color: red;}
>のように記述するのでしょうか?
A,
理屈はその通りですが、画像にcolorを指定しても無意味ですw
>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;}
No.2
- 回答日時:
本来というものは正直ありません。
コードのメンテナンス性や可読性が考慮されていて、
設計意図に合う動きをするなら問題ないのではないでしょうか。
回答としては、②で先祖全て指定するのが面倒だから、
①のようにClassやIdが存在すると考えてください。
また、適当にどこかからの相対指定にした場合は、当てはまるものすべてに適用されます。
「index.html」
<body>
<div>
<form>
<div>
<p id="bb" class="dd"></p>
</div>
</form>
<p id="aa" class="dd"></p>
</div>
<div>
<p id="cc" class="dd"></p>
</div>
</body>
「main.css」
例1)div p{}
例2)#bb,#aa,#cc{}
例3).dd{}
これらの例はどれも同じ結果になります。
※インデントのために全角空白文字を使っているので
コピペはしないでくださいね。
参考に「CSS セレクタ チートシート」で検索してみてください。
https://webliker.info/css-selector-cheat-sheet/
それと1次情報を確認するのを忘れないでくださいね。
https://www.w3schools.com/css/
https://developer.mozilla.org/ja/docs/Web/CSS
No.1
- 回答日時:
(2) の方, li タグに class が付いてるんだけどクラス名ではなく要素名で指定してるよね. (1) の「タグにidやclass名がついてる場合、セレクタは必ずタグ名ではなくidやclass名で指定する、という認識」と矛盾するよ.
まあ「何を指定したいのか」で決めればいいわけであって, 「こうしなければならない」という規則はないんだけど.
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのクラス名・ID名の指定でワ...
-
DreamWeaver 正規表現での連番付与
-
HTML タグに ID や CLASS を付...
-
htmlのid属性って必要なの?
-
レシポンシブデザインをBootstr...
-
個別にリンクの色を変える方法
-
サイトにjQueryが使用されてい...
-
dreamweaver cs4を使用していま...
-
記事タイトルの横にコメント数...
-
HPビルダー CSSの読み方
-
擬似クラスの子要素を指定する...
-
cssのみ使用したプルダウンメニ...
-
divの入れ子を多用してページを...
-
Jimdoで文章中のリンクを張った...
-
【CSS】特定のリンクを含むaタ...
-
スタイルシートのドットが#に...
-
最近、HTMLのヘッダーをIDで定...
-
<div align="right"> を css で...
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSに同じclass名がいっぱい‥。...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
CSSのホバーエフェクト
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートで、id属性の中...
-
htmlのid属性って必要なの?
-
透過背景を解除するにはどうす...
-
外部css定義したclassをht...
-
<span>で2重にかけているものを...
-
CSSのクラス名・ID名の指定でワ...
-
子孫セレクタの読み方をおしえ...
-
Bootstrap3でcontainerがずれる...
-
CSSが効かずどのように指定すれ...
-
brにクラスをつけてcssでdispla...
おすすめ情報