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

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

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

E[foo]|foo属性を持つE要素

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

セレクタの例

input要素のtype属性にスタイルを適用する例

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

E[foo="bar"]|foo属性の値にbarを持つE要素

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

セレクタの例

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

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

E[foo^="bar"]|foo属性の値がbarで始まるE要素

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

セレクタの例

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

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

E[foo*="bar"] |foo属性の値にbarを含むE要素

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

セレクタの例

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

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

同じ階層にある要素の関係性によってスタイルを適用

E + F |E要素の直後に隣接しているF要素

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

セレクタの例

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

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

E ~ F |E要素の以降にあるF要素

E要素の以降にある同じ階層のF要素にスタイルを適用

セレクタの例

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

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

除外するセレクタを指定

E:not(s)|sで指定するセレクタに当てはまらないE要素

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

セレクタの例

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

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

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

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。