前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。
Contents
セレクタの種類
CSSのセレクタには下記のようなものがあります。
- ユニバーサルセレクタ * 全対象のセレクタ
- クラスセレクタ .warningのようにクラスにつけるセレクタ
- IDセレクタ #headerのようにIDにつけるセレクタ
- HTML要素セレクタ h1などのようにhtmlの要素につけるセレクタ
- 属性セレクタ input[name=”hoge”]のようにプロパティを指定するセレクタ
- 子孫セレクタ h1 p などh1の下のpに影響
- 子要素のみのセレクタ h1 > p h1直下のpのみに影響 孫はダメ
- 疑似クラスセレクタ,疑似要素セレクタ a:hover、p:first-childなど
実際にはこれらのさまざまな組み合わせがあります。隣接セレクタというのもありますが、あんまり見ないので省略します。
例 HTMLセレクタ＆クラスセレクタ div.warning{}など
セレクタの詳細度
前回もちょっと触れましたが、要はどのCSSが適用されるかのルール適用のガイドラインみたいなもの
- IDで指定されるごとに合計値 0,1,0,0を加算
- クラスと属性選択、疑似クラスごとに0,0,1,0を加算
- HTML要素、疑似要素ごとに0,0,0,1を加算
- ユニバーサルセレクタは加算されない
- インラインは1,0,0,0
html > body table.data_table みたいのものは0,0,1,3になります。
上記ルールで最も点数の大きいものが適用されます。(左にあるものは桁に相当するので 0,0,1,0 > 0,0,0,20 になります。)
詳細度が同じものは後ろに書いたものが優先されます。
例外として!importantはすべてのCSSを上書きします。
MDN Web Docs 詳細度の計算方法
エンジニアはもう一度CSSとちゃんと向き合ってみよう – 詳細度編
継承
CSSでは親があるプロパティを持っていた場合、内包される子に対してはそのプロパティが継承されます。
例
|
1 |
h1{color:red} |
|
1 |
<h1>本日は<em>晴天</em>なり</h1> |
上記の場合em要素も色は赤になります。
また下記のような特徴もあります。
- ボックス系のプロパティ(マージン、パディング、背景、ボーダー)は継承されない
- 継承に詳細度はないので、例え0,0,0,0の詳細度であっても詳細度があるものが優先される
|
1 2 |
h1{color:gray} *{color:red;} |
|
1 |
<h1>本日は<em>晴天</em>なり</h1> |
上記の場合、emはredになります。
