No.4ベストアンサー
- 回答日時:
なるほど・・皆さんの回答を見て
.test div・・・子孫セレクタの意味ですね。
セレクタの基本は、単純セレクタを接続子でつなげて適用対象を特定する
単純セレクタ
タイプセレクタと全称セレクタのこと(タイプセレクタとはHTMLの要素名)
例) body p
単純セレクタに擬似要素や擬似クラスをつけて使うこともある
タイプセレクタは詳細度1、全称セレクタは0
それにつながるセレクタ
子孫セレクタ 半角スペースです。
body div.section p{}と言うふうに使う
div.section div{}でその子孫末代までdivに適用される。
子セレクタ >です。
body>divの場合、body div divには適用されない。直接の子孫一代のみ
隣接セレクタ +です。
兄に+がいるpだけに適用
属性セレクタ 単純セレクタ[attr~=value][attr][attr=value][attr|=value]など
詳細度は10あります。
例) a[name]{} 属性にnameをもつa要素に適用
例) div[class~=test] class属性の値が半角スペースで区切られているとき
そのうちのひとつが一致するとき class属性については
div.testとまったく同じ意味を持つ
クラスセレクタ
[class~=value]の意味
詳細度は10
一意セレクタ [id=value]と同じ、#valueとかく
例) p#test
詳細度は100になる。ひとつの文書に一度しか現れないので単純セレクタを
省略して#testでもよいが、複数の文書に共通のスタイルシートを適用する
ことも考えれば、div.section h2#testとしておくほうが無難かも
擬似クラス:first-child,:hoverなど
詳細度10
擬似要素:first-letter :first-lineなど
詳細度1
たとえば、次のようなウェブ標準マークアップされたHTMLにおいて
<body>
<div class="header">
<h1>見出し</h1>
</div>
<div class="section">
<h2>見出し</h2>
<div class="section">
<h3>見出し</h3>
<p>文章でここは<em>重要A</em></p>
</div>
</div>
<div class="footer">
<p>ここは<em>重要B</em></p>
<p>ここは<em>重要C</em></p>
</div>
</body>
で、em{text-decoration:under-line;}ですべてのemに下線が引かれます。(詳細度は1ですね)
div.footer em{color:red}でfooter内のemがすべて赤くなります。詳細度は12ですね。
div.footer p+p em{font-weight:bold;}でCのみ太字になります。詳細度は14ですね。
div em{color:green}だと、詳細度が2ですから、Aは緑になりますが、BとCは、詳細度12で赤に指定されているので上書きされませんね。
このようにセレクタをつなげて、不必要なidやclass名をつけなくても、特定の場所を特定できるのです。
この仕組みがカスケーディングの要のひとつです。従来のようにHTML作者がデザインを考えなくて、文書構造だけに専念してマークアップできるようにするためです。★HTMLにデザインのためにclass名やid名をつけなくてすむのです。それを覚えればね。だから便利なのです。
すみません、初心者でしてちょっと難しかったです(;_;)今後勉強しつつ、何度かこのご回答を読み返していきたいと思います(^^)
ただ「このようにセレクタをつなげて・・・」から始まる最後の文は非常にわかりやすかったです!セレクタについて理解が足りなかったのだなと、皆様から頂いたご回答からわかりました。
どうも丁寧にご説明いただきありがとうございます!
No.3
- 回答日時:
こんな感じでしょうか
/*--HTML--*/
<div class="test">
<div>
<p>ここのdivと</p>
</div>
<div>
<p>ここのdivは同じスタイル</p>
</div>
</div>
/*--CSS--*/
.test div{
border:solid 2px #dcdcdc;
padding:10px;
margin:10px;
}
testの中のdiv全てに適用
No.2
- 回答日時:
.test dev・・・・・そんなの知りません。
そもそも、.testって書かれていたとき、それが意味することわかってますか?
時々と言うか、オーサリングツールを作ったりすると出力されたりするセレクタですが、これはCSS2では
*.test の略とみなされます。
【引用】____________ここから
5.3 Universal selector
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:
・ *[lang=fr] and [lang=fr] are equivalent.
・ *.warning and .warning are equivalent.
・ *#myid and #myid are equivalent.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Selectors( http://www.w3.org/TR/CSS2/selector.html#universa … )]より
「universalセレクタが単純セレクタの唯一の構成条件ではない時、アスタリスクを省略することができる。」ということです。省略形だということを理解していないと本来の使い方ができません。
本来は、div.section単純セレクタ(*とタイプセレクタ)につなげて使うのです。さらに、この.と言う結合子は、div[class~=section]の省略でCSS1とCSS1と整合させるために使われています。
私は100%、.testなんて書き方はしません。必ず単純セレクタにつなげて使用します。ですから.test dev???(devはわかりませんがtypeのことかも)は、覚える必要のない書き方だと
Selectors ( http://www.w3.org/TR/CSS2/selector.html )
セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
をしっかり読んで、
Assigning property values, Cascading, and Inheritance ( http://www.w3.org/TR/CSS2/cascade.html )
値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
を読む。
最低限
div.section.body p+p em{}
で文書内のどこを指定しているとか、詳細度がいくつかなどが理解できるようになること。。
難しいですね(>_<)教えていただいたリンク先は今後時間をかけて理解していきたいと思います。
どうもありがとうございました(^^*)
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのクラス名・ID名の指定でワ...
-
外部css定義したclassをht...
-
css 記述法
-
ラジオボタンの装飾(色の違う2...
-
divでくくった中の要素にa link
-
フロートのクリアについて
-
idの中のid指定
-
スタイルシートで特定IDかつ特...
-
liリストタグの背景色に色がつ...
-
htmlの文字が縦書きになる
-
Macで画像の切り抜きできないの?
-
画像イメージの上下左右、欲し...
-
html/cssの、navを2段にする...
-
【ヒトの神秘】美男美女から何...
-
複数のボタンを等間隔に、かつ...
-
smallにtext-allignが効かない
-
HTML属性での「""」 「''」違い
-
<div align="center">を使わず...
-
改行ほどは行かないけど、若干...
-
Media Queries 4 で 非推奨とな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
CSSのクラス名・ID名の指定でワ...
-
個別にリンクの色を変える方法
-
透過背景を解除するにはどうす...
-
liリストタグの背景色に色がつ...
-
子孫セレクタの読み方をおしえ...
-
CSSに同じclass名がいっぱい‥。...
-
最近、HTMLのヘッダーをIDで定...
-
外部css定義したclassをht...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
display:table-cell内でこんな...
-
htmlとcssで吹き出しの中に文字...
-
同ページ内でリンクの色を変え...
-
外部スタイルシートで定義した...
-
name属性とid属性
おすすめ情報