【CSS】特定の要素を指定するセレクタ｜属性の値や、除外などの指定

CSSの要素を指定するセレクタには、忘れがちですけど便利なセレクタがあります。今回は個人的によく使用する特定の要素を指定するセレクタのまとめです。

属性または属性値によってスタイルを適用

foo属性を持つE要素に対してスタイルを適用

type属性をもつinput要素に対してスタイルを適用する例

input[type] { font-size: 10px; }

foo属性の値にbarを持つE要素に対してスタイルを適用

type属性の値がsubmitのinput要素に対してスタイルを適用する例

input[type="submit"]{ font-size: 10px; }

foo属性の値がbarで始まるE要素に対してスタイルを適用

href属性の値が#で始まるa要素に対してスタイルを適用する例

a[href^="#"] { font-size: 10px; }

foo属性の値にbarを含むE要素に対してスタイルを適用

href属性の値にamazon.co.jpを含むa要素に対してスタイルを適用する例

a[href*="amazon.co.jp"] { font-size: 10px; }

同じ階層にある要素の中で、 E要素の直後にあるF要素に対してスタイルを適用

同じ階層にある要素の中で、h2要素の直後にあるp要素に対してスタイルを適用する例

h2 + p { font-size: 10px; }

同じ階層にある要素の中で、E要素の以降にあるすべてのF要素にスタイルを適用

同じ階層にある要素の中で、h2要素の以降にあるすべてのp要素にスタイルを適用する例

h2 ~ p { font-size: 10px; }

sで指定するセレクタに当てはまらないE要素に対してスタイルを適用

href属性の値に amazon.co.jpを含んでいないa要素に対してスタイルを適用する例

a:not([href*="amazon.co.jp"]) { font-size: 10px; }

その他の特定の要素を指定するセレクタについては、以下の参考サイトを確認してみてください。