CSSの詳細度について - 坂本研のゼミ室

動けばOK感覚を脱するために、
CSSの詳細度についてメモします。

CSS (Cascading Style Sheet) とは、Webページのスタイルを宣言する言語
先に宣言されたルールが、条件に応じて後から宣言されるルールによって継承または上書きされる。

.text {
    color: blue;
}

例えば、上記のように記述すると文字を青色にできる。
このように、

この３つで記述できる。

基本的な形

.selector{
    property: value
}

CSSのセレクタには詳細度という条件があります。
セレクタの内容によってルールセットが優先される。
f:id:TakaShinoda:20190703233731p:plain

valueの後に半角スペース入れて記述すると、最も優先させる

.hoge {
    color: orange !important;
}

!importantは基本的に避ける記述

HTMLのstyle属性によるスタイルの記述方法

<button style="color: lawngreen">YES!</button>

CSSファイル、HTML上でのstyle要素などに記述されたルールより優先される
基本的に避ける方が無難

HTML上のid="hoge"とされた要素があった場合、
hogeというIDは同一ドキュメント上では、一度しか使用されず、
固有の識別子で詳細度が高い

.hoge {
    color: red;
}

#hoge {
    color: gold;   /* これが適用される */
}

button {
    color: lawngreen;
}

IDセレクタより詳細度は低い
IDとは異なり、class属性はドキュメント内で何度も使用可能

クラスセレクタの例
.hoge {
    color: green;   /* これが適用される */
}

button {
    color: lawngreen;
}

属性セレクタは要素の持つ属性の有無、または属性の値と条件にマッチするかで選択できる

<div>
    <button class="ok">OK</button>
    <button class="cancel">キャンセル</button>
</div>

属性セレクタの例
[class="ok"] {  /* class属性にokが含まれる要素を選択 */
    color: blue;   /* こっちが適用 */
}

button {
    color: red;
}

擬似クラスセレクタは、条件にマッチした要素にクラスセレクタのレベルで、ルールを適用させる事が可能

擬似クラスの例
button:first-child {  /* 最初の子要素を選択*/
    color: skyblue;   /* こっちが適用 */
}

button {
    color: red;
}

要素を直接指定するセレクタは、IDやclassよりも詳細度は低い

h1 {
    color: yellow;
}

ユニバーサルセレクタは、全ての要素にマッチするセレクタ
詳細度を持たず、一番弱いセレクタ

* {
    font-size: 16px;
}

これらのセレクタが組み合わさる事で詳細度の計算は複雑になっていく
classセレクタが1つと2つでは、2つの方が優先される

.title .height {
    font-size: 16px;   /* こっちが適用 */
}

.title {
    font-size: 24px;
}

詳細度の計算はややこしいので、このツールを使うと楽です
specificity.keegan.st