見出し画像

CSSセレクタの細かい部分を学びなおす

引き続き「HTML5プロフェッショナル認定試験」対策を兼ねた、多くを引用した個人の勉強ノートです。参考まで。どんどん追記予定。
知ってるつもりでも、意外に忘れてる&知らないことが多いCSS。今回はセレクタ関係の事を復習していきます。

属性セレクタ一覧

よく使うのは完全一致くらいで、7つもあることを忘れていました。

■ 属性名を持つ(属性値は問わない)

[data-value] {
 /* Attribute exists */
}

■ 指定の属性名と値を持つ(完全一致)

[data-value="foo"] {
 /* Attribute has this exact value */
}

■ 指定の属性名と部分一致する値を持つ(*)

[data-value*="foo"] {
 /* Attribute value contains this value somewhere in it */
}

■ 指定の属性名と値にスペースで区切られた指定値を持つ(~)


[data-value~="foo"] {
 /* Attribute has this value in a space-separated list somewhere */
}

上記部分一致とはことなり、スペースで区切られた値が一致するかどうかが鍵です。artと指定した場合、“abstract art” はヒットしますが、"starting"は拾いません。

Value is in a space-separated list: value is either the only attribute value, or is a whole value in a space-separated set of values. Unlike the “contains” selector, this selector will not look for the value as a word fragment. To use this selector, add a tilde (~) before the equals sign. For example, img[alt~="art"] will select images with the alt text “abstract art” and “art show”, but not “athlete starting a new sport” (which the “contains” selector would select).

■ 指定の属性名と値にハイフンで区切られた指定値を持つ(|)

[data-value|="foo"] {
 /* Attribute value starts with this in a dash-separated list */
}

上記のハイフン版。

■ 指定の属性名と指定値から始まるを持つ(^)

[data-value^="foo"] {
 /* Attribute value starts with this */
}

■ 指定の属性名と指定値から終わるを持つ($)

[data-value$="foo"] {
 /* Attribute value ends with this */
}

拡張子等に使うと便利。

(ちなみに)カスタムデータ属性(独自の属性名を適用できる)を使う場合は、"data-"を頭につける必要があります。

疑似クラス

:hover とかは普通に多用すると思いますが、忘れてたものや使い方に注意だな感じたものだけ列挙します。

■ :only-child /only-of-type
他の兄弟(typeの場合は同じ要素)を一つも持たない、その親の唯一のである要素

■ :empty
子要素やコンテンツを一つも持たない要素。コメントは影響しない。

結合子

子セレクタの”>” 、隣接セレクタの"+"以外にもそういえばありました。

■ 間接セレクタ "~"
親要素が同じ兄弟関係の弟に適用されるセレクタ。指定した要素Aのに登場する、指定した要素B全てに適用される。あくまで同じ要素の弟達だけ。

<div>
    <p>選ばれない</p>
    <h1>これ以降のp</h1>
    <p>選ばれる</p>
    <p>選ばれる</p>
</div>

h1 ~ p {
 color:red;
}

詳細度(優先順位)

以下の優先順位で、それぞれの数を加算して合計点で比較する。結合子は影響しない。この計算式は記憶から消えてました。

インラインスタイルシート(タグのstyle属性に直書き)…1000点
IDセレクタ…100点
クラス、疑似クラス、属性セレクタ…10点
タイプ(要素)セレクタ、疑似要素…1点

注意点として、いくらクラスセレクタが10個つながっていてもIDセレクタに匹敵することはない。上記優先順をまたがない。以下が例です。

.class p …11点(クラスと要素)
li:hover…11点(要素と疑似クラス)
li::after…2点(要素と疑似要素)

クラス・疑似クラスと属性が同列なのがポイントです。

以上です!何かすこしでも役に立てば嬉しいです。
コメントもお待ちしてます。

この記事が気に入ったらサポートをしてみませんか?