0

CSSセレクタの種類と適用優先順位、指定方法等

CSS

CSS備忘録
CSSのセレクタの適用優先順位
セレクタの指定方法

たまにデザイン設計の際、高確率で細かいCSSルールを忘れてしまうので、
備忘録として残します。

スクリーンショット 2015-07-02 00.13.38

■セレクタの種類

IDセレクタ #idの様なid単位のセレクタ
クラスセレクタ .style1の様な各要素のclass単位のセレクタ
属性セレクタ [title=”test”]の様な要素の属性単位のセレクタ
疑似セレクタ li:first-childの様な疑似セレクタ
タイプセレクタ pやdivの様な要素単位のセレクタ

セレクタ以外
!important
id指定等はもちろん事、インライン指定よりも優先される。
とにかく最優先する場合に有効。
どうしても対象スタイルを適用したい場合には有効だが使いすぎると
修正する時に辛い。

p {color:blue !important;}

インライン指定
!importantを除いて一番優先される!!!

<p style=”color:red;“>test</p>

■各セレクタ+αのスタイル適用優先順位

1 !important
2 インライン指定
3 IDセレクタ
4 クラスセレクタ/属性セレクタ/疑似セレクタ
5 タイプセレクタ
6 より後ろに書かれているスタイル

■CSSのポイントの話
各セレクタでの指定には以下のような配分で点数が割り振られていると考えられる

インライン 1000pt
id 100pt
クラス/疑似/属性 10pt
タイプ 1pt

なので以下のようなケースの場合上の行のスタイルが適用され、redになる

.c1.c2.c3.c4{color:red} /* クラス×4=40pt */
.c1.c2{color:blue} /* クラス×2=20pt */
ただしあくまでセレクタタイプが同レベルの場合の判断基準のようなので

#id1{color:red;}
.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{color:blue}
みたいな(普通ありえないだろうけど)指定をしたからといって
上述した各セレクタの力関係は変わりませんのでこの場合はredになる
(IDセレクタ > クラスセレクタ)

■CSSセレクタの指定方法
カンマ区切り
同じスタイルを複数の要素に適用する

.style1, style2

スペース区切り
.style1の中のp要素に適用する

.style1 p

>(不等号)
p要素の直下の.styleに適用する

p>.style1

.(ドット)でつなげる

.style1かつ.style2に適用する

.style1.style2

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です