【ブログ向け】CSSセレクタ入門【応用編】

前回は、CSSセレクタの中でも、使用頻度の高い「基本のセレクタ」について解説してみました。

今回は、より詳細なカスタマイズのための「応用セレクタ」 を紹介したいと思います。

はじめに
より詳細なカスタマイズのための「応用セレクタ」
その他のセレクタ
- 兄弟を指定
- 隣接する兄弟を指定
まとめ

はじめに

CSSセレクタの概要や、記事中で紹介するコードの表示確認方法などは、以下の前回記事で解説していますので、そちらを確認してください。

より詳細なカスタマイズのための「応用セレクタ」

全ての要素を指定

*記号を使って、すべての要素を指定することができます。

実際の指定方法は以下のような感じです。

<div>全ての要素を指定 その１</div>
<p>全ての要素を指定 その２</p>

<style>
* {
    color: green;
}
</style>

すべての要素の文字色が緑色となるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【応用編】

指定要素の全ての子孫を指定

子孫を指定する方法を応用して、指定要素の全ての子孫を指定することができます。

実際の指定方法は以下のような感じです。

<div class='parent'>
    <div>指定要素の全ての子孫を指定 その１</div>
    <p>指定要素の全ての子孫を指定 その２</p>
</div>
<div>ここは非対象です</div>

<style>
.parent > * {
    color: green;
}
</style>

parentクラスを含む要素以下の、全ての要素の文字色が緑色となるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【応用編】

ここで、parentクラスを含む要素の外側にある「ここは非対象です」の部分にはCSSが適用されません。

属性で指定

特定の属性を持つ要素を指定

属性を[]で囲むことで、特定の属性を持つ要素を指定することができます。

実際の指定方法は以下のような感じ。

<a target='_blank'>特定の属性を持つ要素を指定</a>
<a>こちらは非対象</a>

<style>
a[target] {
    color: green;
}
</style>

target属性を持つa要素の文字色が緑色となるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【応用編】

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>

属性が「完全一致」、「部分一致」、「前方一致」、「後方一致」する場合に、文字が色付きで表示されるように指定しています。

表示は以下のような感じです。

【ブログ向け】CSSセレクタ入門【応用編】

その他の属性セレクタの使い方は、以下のページで確認できます。

「疑似クラス」による指定

マウスオーバー時の指定

:hoverのような記述を使って、マウスオーバー時の表示をカスタムすることができます。

実際の指定方法は以下のような感じ。

<div class="any-class">マウスオーバー時の指定</div>

<style>
.any-class:hover {
    font-size: 2rem;
}
</style>

指定のクラスを持つ要素にマウスオーバーした時に、文字サイズが変化します。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【応用編】

その他の疑似クラス

先ほど紹介した:hoverは、「疑似クラス」 と呼ばれるものの１つです。

: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番目)」、「最後の要素」の文字が色付きで表示されるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【応用編】

少しわかりにくいですが、上のGIF動画で「クリック中の要素」の部分が、ときどき赤文字に変化しているのがわかると思います。

これは、「クリック中の要素」の部分をクリック（または長押し）しているタイミングで文字色が赤色に変化しています。

その他の疑似クラスの使い方は、以下のページで確認できます。

「疑似要素」による指定

要素の前後をカスタム

::beforeや::afterのような記述を使って、指定の要素の前後をカスタムすることができます。

実際の指定方法は以下のような感じ。

<div class="any-class">要素の前後をカスタム</div>

<style>
.any-class::before {
    content: "【";
    color: red;
}
.any-class::after {
    content: "】";
    color: red;
}
</style>

指定のクラスを持つ要素の前後に赤色の【】を追加するようなCSSを追加してみました。

表示は以下のような感じです。

【ブログ向け】CSSセレクタ入門【応用編】

指定の通り、「要素の前後をカスタム」の部分が、赤色の【】で囲まれて表示されています。

その他の疑似要素

先ほど紹介した::beforeや::afterは、「疑似要素」 と呼ばれるものです。

::beforeや::after以外にも疑似要素があるので、いくつか簡単なサンプルを紹介したいと思います。

<ul>
    <li class='check1'>最初の１行をカスタム<br>２行目は非対象</li>
    <li class='check2'>最初の１文字をカスタム</li>
    <li class='check3'>選択文字をカスタム</li>
</ul>

<style>
.check1::first-line {
    color: green;
}
.check2::first-letter {
    color: red;
}
.check3::selection {
    color: orange;
}
</style>

「最初の１行」、「最初の１文字」、「選択中の文字」の文字色を変化させるCSSを追加してみました。

表示は以下のような感じになります。

【ブログ向け】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要素の文字色が、緑色となるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【応用編】

指定の要素のうしろにあるdiv要素の部分だけが緑色となっています。

p要素や指定要素の前にある要素は、指定対象外のためCSSは適用されていません。

隣接する兄弟を指定

+記号を使うと、指定の要素のすぐあとにある、同じ階層の要素を指定することができます。

実際の指定方法は以下のような感じ。

<div>指定要素の前は非対象です</div>
<div class='adjacent-origin'>指定の要素</div>
<div>対象の隣接兄弟です</div>
<div>兄弟要素の非対象です</div>

<style>
.adjacent-origin + div {
    color: green;
}
</style>