WebサイトやWebアプリをつくっている時。
JavaScript等を使って条件を指定して
「特定の要素だけ」にstyleを適用する場合など、
あると思います。
ただ実は「cssのみ」でも、
条件の絞り込みを行い、「特定の要素だけ」にstyleを適用
することができることをご存知でしょうか。
今回は、そんな「特定の文字に一致、文字を含む、文字で始まる…」といった
「条件に当てはまる要素だけ」にstyleを適用する方法について、書いていきたいと思います。
なお、この記事の各サンプルはすべて「class名」を例として記載していますが、
「id名」での適用ももちろん可能です。id名で適用するには、
div[class*=”child”]
↑この様になっている class の部分を単純に id と置き換えることで可能です。
特定の文字で始まる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のみで条件を指定、要素を特定するセレクタの詳しい解説ページがあります。
参考にすると、より理解が深まるかもしれません。
この記事のまとめ
今回は、JavaScript等を使用せずとも、
「cssのみ」で条件を指定、
それに当てはまる要素だけにstyleを適用する方法について、書きました。
こちらは実際に使ってみると、
かなり応用が利くテクニックで、私自身も、実際の制作現場でよく使う方法になります。
この方法を知らなかった頃は、わざわざ色変更やhoverした際の動き付けをするためだけに
JavaScriptで要素を特定したり、少し回りくどい指定の仕方をしていましたが
これを知って、こんな方法もあるんだなぁと感心した記憶があります。
当サイトでは、今後もWeb制作、Webデザインに関する様々な記事を書いていく予定です。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。