【授業メモ】CSSセレクタ
ツリー構造の理解
HTMLを構成するツリー構造を理解する
要素を図に書くなどして、整理すること。
どことどこが対等で、どことどこが上下になっているか整理すること。
divが入れ子になって増えてくると、今自分がどこにいて、どこに何をしたいのか構造を理解していないと、効かせたい命令を正しい場所にすることができない。
例）
テキスト82ページ セレクタ一覧参照
■子セレクタ
Aの子供のB →A>B
例) #containerの中にあるpだけ
#container > p {
color: red;
}
<div id="container">
<p>テキスト1</p>
<div id="box">
<p>テキスト2</p>
<p>テキスト3</p>
</div><!--/#box-->
</div><!--/#container-->
#container > p {
color: red;
}
→ #containerの中にあるｐだけ赤くできる
■子孫セレクタ
親Aに含まれるB→A B いつも使っている半角スペース
例）#containerの中にあるpすべて
#container p {
color: red;
}
<div id="container">
<p>テキスト1</p>
<div id="box">
<p>テキスト2</p>
<p>テキスト3</p>
</div><!--/#box-->
</div><!--/#container-->
#container p {
color: red;
}
→ #containerの中にあるｐ全て赤くなってしまうので、#boxのpも赤くなる
■CSSの優先順位 点数制
セレクタには優先順位があり、点数計算して高得点のものが適用される
の順で点数が大きく優先される！
書いた順番が優先されるのは、セレクタの種類が同じ場合であり、
!importantというセレクタを無視する裏技もあるが、これは極力使わない。法則をすべて無視して優先されてしまうから。
#box p {
color: red;
}
.txt p {
color:blue;
}
→下に書いたほうが最新になるので、#box pがすべて赤くなり、その中の.txt pのみ青くなるかと思いきや、ならない！赤のまま！！！！！
→idのほうがclassより強いので、そちらが優先されてしまっている
p {
color: red;
}
p.txt {
color:blue;
}
→命令のスタート地点をそろえれば、詳しく書いてある方が優先されて青くなる！！！！
後に書けばなんでも優先されるわけじゃないってことですね！！
idとclassをたくさんつけて、入れ子にして・・・っていう構造が最近増えてきたので、IDセレクタ ＞ クラスセレクタ の力関係は注意しよう。
