【css設計】cssセレクタの詳細度

htmlとcss

「cssでhtmlを装飾するために、コードを書いたけど反映されない・・・」
原因の一つに、詳細度が関係しているかもしれません。
cssを書いていく時に、「後に書いたコードの方が優先される」、「!important」が優先されるということは分かっていてもそれ以外に「あれ？うまくいかない。」ということが出てきました。
web制作初心者の私自身、詳細度を完璧に理解できていなかったので、学び直し。
自分が学んだことを忘れないように、cssセレクタの優先度について簡単にまとめたいと思います。

キホンのキ

セレクタには、詳細度（優先される度合い）がある。
セレクタの内容が具体的・詳細度が高いほどそのルールが適応される。

!important

プロパティの値の後ろに半角スペースで続けて記述することで、最も優先される。多用はしないこと。

  <button class="point">保存する</button>

例）css

.point{
  color: red !important;
}

インライン記述

htmlのstyle属性として直接htmlに書くこと。基本的にこちらも避けた方が良い。
できるだけスタイルは外部にファイル化されたcssファイルで一元管理する方が管理しやすい。

例）html

<button style="color:red">保存する</button>

IDセレクタ

IDは１ページの中で1回のみ使うことができる。
一度しか使えないため、固有の識別となり、詳細度が高くなる。

例）css

#point{
 color:red; /*こちらのスタイルが適応される*/
}
.point{
 color:green;
}
button{
  color:blue;
}

クラスセレクタ、属性セレクタ、擬似クラス

クラスセレクタの例

/* class="point" であるすべての要素 */
.point{
  color:red;
}

属性セレクタの例
([ ]内にhtmlタグの名前、属性を入れて指定）

/* title 属性を持つ<a>要素 */
a[title] {
　　color: red;
}

擬似クラスの例
（条件にマッチした要素にルールが適用される）

:first-child、:last-child、:only-child、:nth-of-type(〜)、:first-of-type、:last-of-type、:only-of-type、:active、:hover、:focus、:visited

/* ユーザーのポインターが当たっているすべてのボタン */
button:hover {
  color: blue;
}

MDN cssカスケーディングスタイルシートより

要素セレクタ、擬似要素

要素セレクタ例

button{
  color:red;
}

擬似セレクタ例

::before、::after、::first-letter、::first-line、::selection

button::before{
  content: url(img/download.svg);...
}

ユニバーサルセレクタ（全称セレクタ）

アスタリスク（ * ）を記述してすべての要素を対象にスタイルを適用するセレクタのこと。

例）css

* {  /*　すべての要素のmarginとpaddingを０にする　*/
  margin:0;
  padding:0;
}

参考にした本

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法【電子書籍】[ 谷 拓樹 ]

詳細度を理解して、スッキリとしたコードを書くよう、心がけていきたいと思います( ´ ▽ ` )

コメント