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

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

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

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

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

セレクタの例

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

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

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

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

セレクタの例

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

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要素に対してスタイルを適用

セレクタの例

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

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

まとめ

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

参考サイトなど

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

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

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