【ブログ向け】CSSセレクタ入門【応用編】
前回は、CSSセレクタの中でも、使用頻度の高い「基本のセレクタ」について解説してみました。
今回は、より詳細なカスタマイズのための「応用セレクタ」 を紹介したいと思います。
目次
はじめに
CSSセレクタの概要や、記事中で紹介するコードの表示確認方法などは、以下の前回記事で解説していますので、そちらを確認してください。
より詳細なカスタマイズのための「応用セレクタ」
全ての要素を指定
*
記号を使って、すべての要素を指定することができます。
実際の指定方法は以下のような感じです。
<div>全ての要素を指定 その1</div> <p>全ての要素を指定 その2</p> <style> * { color: green; } </style>
すべての要素の文字色が緑色となるように指定しています。
表示は以下のような感じになります。
指定要素の全ての子孫を指定
子孫を指定する方法を応用して、指定要素の全ての子孫を指定することができます。
実際の指定方法は以下のような感じです。
<div class='parent'> <div>指定要素の全ての子孫を指定 その1</div> <p>指定要素の全ての子孫を指定 その2</p> </div> <div>ここは非対象です</div> <style> .parent > * { color: green; } </style>
parent
クラスを含む要素以下の、全ての要素の文字色が緑色となるように指定しています。
表示は以下のような感じになります。
ここで、parent
クラスを含む要素の外側にある「ここは非対象です」の部分にはCSSが適用されません。
属性で指定
特定の属性を持つ要素を指定
属性を[]
で囲むことで、特定の属性を持つ要素を指定することができます。
実際の指定方法は以下のような感じ。
<a target='_blank'>特定の属性を持つ要素を指定</a> <a>こちらは非対象</a> <style> a[target] { color: green; } </style>
target
属性を持つa
要素の文字色が緑色となるように指定しています。
表示は以下のような感じになります。
target
属性を持たないa
要素の文字「ここは非対象です」の部分には、CSSが適用されません。
その他の属性指定
属性の中身を指定することもできます。
いくつかの属性の内容を指定する方法を紹介したいと思います。
実際の指定は以下のような感じになります。
<a href='/perfect-match'>属性が一致する</a> <a href='/dummy/partial-match/dummy'>属性の一部が一致する</a> <a href='/left-hand-match/dummy'>属性の先頭が一致する</a> <a href='/dummy/right-hand-match'>属性の末尾が一致する</a> <a>non-target</a> <style> /* 完全一致 */ a[href="/perfect-match"] { color: green; } /* 部分一致 */ a[href*="partial-match"] { color: red; } /* 前方一致 */ a[href^="/left-hand-match"] { color: orange; } /* 後方一致 */ a[href$="right-hand-match"] { color: purple; } </style>
属性が「完全一致」、「部分一致」、「前方一致」、「後方一致」する場合に、文字が色付きで表示されるように指定しています。
表示は以下のような感じです。
その他の属性セレクタの使い方は、以下のページで確認できます。
「疑似クラス」による指定
マウスオーバー時の指定
:hover
のような記述を使って、マウスオーバー時の表示をカスタムすることができます。
実際の指定方法は以下のような感じ。
<div class="any-class">マウスオーバー時の指定</div> <style> .any-class:hover { font-size: 2rem; } </style>
指定のクラスを持つ要素にマウスオーバーした時に、文字サイズが変化します。
表示は以下のような感じになります。
その他の疑似クラス
先ほど紹介した:hover
は、「疑似クラス」 と呼ばれるものの1つです。
:hover
以外にも疑似クラスがあるので、いくつかサンプルを紹介したいと思います。
<ul class='any-class'> <li>最初の子要素</li> <li>これは非対象です</li> <li class='click-check'>クリック中の要素</li> <li>4番目の子要素</li> <li>最後の子要素</li> </ul> <style> /* 最初の子要素 */ .any-class > li:first-child { color: green; } /* クリック中の要素 */ .any-class > .click-check:active { color: red; } /* 4番目の子要素 */ .any-class > li:nth-child(4) { color: orange; } /* 最後の要素 */ .any-class > li:last-child { color: purple; } </style>
「最初の子要素」、「クリック中の要素」、「n番目の子要素(ここでは4番目)」、「最後の要素」の文字が色付きで表示されるように指定しています。
表示は以下のような感じになります。
少しわかりにくいですが、上のGIF動画で「クリック中の要素」の部分が、ときどき赤文字に変化しているのがわかると思います。
これは、「クリック中の要素」の部分をクリック(または長押し)しているタイミングで文字色が赤色に変化しています。
その他の疑似クラスの使い方は、以下のページで確認できます。
「疑似要素」による指定
要素の前後をカスタム
::before
や::after
のような記述を使って、指定の要素の前後をカスタムすることができます。
実際の指定方法は以下のような感じ。
<div class="any-class">要素の前後をカスタム</div> <style> .any-class::before { content: "【"; color: red; } .any-class::after { content: "】"; color: red; } </style>
指定のクラスを持つ要素の前後に赤色の【】
を追加するようなCSSを追加してみました。
表示は以下のような感じです。
指定の通り、「要素の前後をカスタム」の部分が、赤色の【】
で囲まれて表示されています。
その他の疑似要素
先ほど紹介した::before
や::after
は、「疑似要素」 と呼ばれるものです。
::before
や::after
以外にも疑似要素があるので、いくつか簡単なサンプルを紹介したいと思います。
<ul> <li class='check1'>最初の1行をカスタム<br>2行目は非対象</li> <li class='check2'>最初の1文字をカスタム</li> <li class='check3'>選択文字をカスタム</li> </ul> <style> .check1::first-line { color: green; } .check2::first-letter { color: red; } .check3::selection { color: orange; } </style>
「最初の1行」、「最初の1文字」、「選択中の文字」の文字色を変化させるCSSを追加してみました。
表示は以下のような感じになります。
「選択文字をカスタム」の部分は、範囲選択にあわせて、文字色が変化しているのがわかると思います。
その他の疑似要素の使い方は、以下のページで確認できます。
その他のセレクタ
兄弟を指定
~
記号を使うと、指定の要素のあとにある、同じ階層の要素を指定することができます。
実際の指定方法は以下のような感じ。
<div>指定要素の前は非対象です</div> <div class='adjacent-origin'>指定の要素</div> <div>対象の兄弟要素</div> <p>p要素は非対象です</p> <div>対象の兄弟要素</div> <style> .adjacent-origin ~ div { color: green; } </style>
adjacent-origin
クラスを持つ要素のあとにあるdiv
要素の文字色が、緑色となるように指定しています。
表示は以下のような感じになります。
指定の要素のうしろにあるdiv
要素の部分だけが緑色となっています。
p
要素や指定要素の前にある要素は、指定対象外のためCSSは適用されていません。
隣接する兄弟を指定
+
記号を使うと、指定の要素のすぐあとにある、同じ階層の要素を指定することができます。
実際の指定方法は以下のような感じ。
<div>指定要素の前は非対象です</div> <div class='adjacent-origin'>指定の要素</div> <div>対象の隣接兄弟です</div> <div>兄弟要素の非対象です</div> <style> .adjacent-origin + div { color: green; } </style>
adjacent-origin
クラスを持つ要素のすぐあとにあるdiv
要素の文字色が、緑色となるように指定しています。
表示は以下のような感じになります。
指定の要素のすぐうしろにあるdiv
要素の部分だけが、緑色となっています。
隣接兄弟以外の兄弟要素や指定要素の前にある要素は、指定対象外のため、CSSは適用されていません。
まとめ
今回は、CSSセレクタの中で、より詳細なカスタマイズのための「応用セレクタ」を紹介してみました。
本ブログでも、CSSに関する記事を複数投稿しています。
今回、前回と紹介したCSSセレクタを使って試せる内容となっていますので、ぜひ一度見てみてください。