cssだけ!特定の文字に「一致」「含む」等の条件に当てはまる要素だけを選択する方法

cssだけ!特定の文字に「一致」「含む」等の 条件に当てはまる要素だけを選択する方法

実際にWebデザイン、Web制作の現場で
WebサイトやWebアプリをつくっている時。

JavaScript等を使って条件を指定して
「特定の要素だけ」にstyleを適用する場合など、
あると思います。

ただ実は「cssのみ」でも、
条件の絞り込みを行い、「特定の要素だけ」にstyleを適用
することができることをご存知でしょうか。
今回は、そんな「特定の文字に一致、文字を含む、文字で始まる…」といった
「条件に当てはまる要素だけ」にstyleを適用する方法について、書いていきたいと思います。

特定の文字で始まるclass名をもつ要素だけを選択

以下のように書くと、parent という文字ではじまるclass名の要素だけを指定して
styleを適用できます。

div[class^="parent"] {
  color: #5ACDC8;
}

特定の文字を含むclass名をもつ要素だけを選択

以下のように書くと、child という文字を含むclass名の要素だけを指定して
styleを適用できます。

div[class*="child"] {
  color: #5ACDC8;
}

特定の文字を末尾にもつclass名の要素だけを選択

以下のように書くと、ikura という文字を末尾にもつclass名の要素だけを指定して
styleを適用できます。

div[class$="ikura"] {
  color: #5ACDC8;
}

特定の属性を含む要素だけを選択

また、条件を指定して要素を絞り込む方法は、classに限った話ではありません。

以下のように書くと、data-osushi という属性を持つ要素だけを特定して
styleを適用できます。

div[data-oshushi] {
  color: #5ACDC8;
}

特定の属性の値が一致した要素だけを選択

以下のように書くと、data-oshushi という属性の値が ikura に一致する要素だけを特定して
styleを適用できます。

div[data-oshushi="ikura"] {
  color: #5ACDC8;
}

data属性以外もOK。いろいろな属性での要素の絞り込みが可能です

上で書いた「属性をもつ」という意味は、決してdata属性の話のみではありません

・たとえば、href を持つ要素のみ、つまりリンクを持つ要素
・そのうちで、target=”_blank” を持つaタグのみ

といった具合の条件の絞り込みも、もちろん可能です。

具体的な応用例は次のセクションで書いていきます。

応用:リンク先URLが一致した要素だけを選択

上のセクションで書いたように
data属性やclass名以外でも、
「特定の条件に一致する要素だけ」を指定して、styleを適用することが可能です。

例えば、「リンク先のURLが一致した要素だけ」の場合は以下のように書きます。

a[href="https://vuetifyjs.com"] {
  color: #5ACDC8;
}

↑このように書くと、https://vuetifyjs.com に一致するリンクを持つ要素のみ、
styleを適用するという意味になります。

応用:リンク先URLに特定の文字を含む要素だけを選択

次のように書けば、
この記事の上部で書いた書き方と同様の方法で
「リンク先URLに特定の文字を含む要素だけ」
を選択することが可能です。

a[href*="vuetify"] {
  color: #5ACDC8;
}

↑このように書くと、vuetify という文字を含むリンクを持つ要素のみ、
styleを適用するという意味になります。

応用:target=”_blank”を持つaタグのみを選択

「別タブで開くリンク」だけ、つまり target=”_blank” を持つ要素だけを指定して、
styleを適用するには、以下のように書きます。

a[target="_blank"] {
  color: #5ACDC8;
}

↑このように書くと、「別タブで開くリンク」だけに
styleを適用するという意味になります。

参考リンク:MDNの解説ページ

Mozillaが運営するWeb技術のオンラインリファレンスサイト、
MDN Web Docs 内に、今回ご紹介したような
cssのみで条件を指定、要素を特定するセレクタの詳しい解説ページがあります。
参考にすると、より理解が深まるかもしれません。

属性セレクター – CSS: カスケーディングスタイルシート | MDN

この記事のまとめ

今回は、JavaScript等を使用せずとも、
「cssのみ」で条件を指定
それに当てはまる要素だけにstyleを適用する方法について、書きました。

こちらは実際に使ってみると、
かなり応用が利くテクニックで、私自身も、実際の制作現場でよく使う方法になります。

この方法を知らなかった頃は、わざわざ色変更やhoverした際の動き付けをするためだけに
JavaScriptで要素を特定したり、少し回りくどい指定の仕方をしていましたが
これを知って、こんな方法もあるんだなぁと感心した記憶があります。

当サイトでは、今後もWeb制作、Webデザインに関する様々な記事を書いていく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。