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-"を頭につける必要があります。

[attribute] | CSS-Tricks

疑似クラス

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

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

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

CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方

結合子

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

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

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

h1 ~ p {
 color:red;
}

【CSS】間接セレクタの使い方の覚書 – niwaka-web

詳細度（優先順位）

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

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

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

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

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

CSSセレクタの優先度を手軽に計算して比較できるツール「Specificity Calculator」

CSSセレクタの優先順位の計算方法 - Qiita

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