セレクターの使い方まとめサイト【CSS初心者向け】 #6

CSSをの初心者向けに、使い方で迷いがちなセレクターについて基本的な内容をまとめてみました。

擬似クラス、擬似要素よるセレクターを中心にまとめていますので、サイト作成時に「う、何だったっけ？」となった時にこちらを振り返っていただければ見直せるような構成にしています。

是非、参考にしていただければと思います。

なお、タイプセレクター、クラスセレクター、idセレクター、属性セレクターなど、より初歩寄りの説明についても別サイトにまとめていますので、必要に応じてタグカテゴリーから「CSS」に入ってそちらも参考にしていただければと思います。

それでは、本記事では「擬似要素」から入ります。順を追ってみていきましょう。

 

[rtoc_mokuji title=”Contents” title_display=”left” heading=”h4″ list_h2_type=”round” list_h3_type=”round” display=”close” frame_design=”frame4″ animation=”slide”]

イメージ画像

 

CSS初心者向けセレクターの使い方まとめサイト #6

擬似要素（::before、::after）

擬似要素は、要素の特定の部分をスタイリングすることができるセレクターです。

よく使われるスタイルには「::before」や「::after」があります。

「：：」（コロン）が2ついていますね。

例えば「h1」が以下のようにあったとします。

 

HTML

<h1>擬似要素セレクター</h1>

この場合に擬似要素を当てたい場合は、CSSでh1に対して以下のように記述します。

 

CSS

h1::before {
  content: "「CSS」";
}

h1::after {
  content: "【使い方】";
}

次に「content」プロパティで加えたいテキストを指定すると、結果は以下のようになります。

h1に記述している「擬似要素セレクター」という要素に、擬似要素セレクターbeforeで指定した「CSS」が加わり、同じくafterに【使い方】が加わっているのが分かりますね。

  • h1に記述している「擬似要素セレクター」という文言に、
  • 擬似要素セレクター::beforeでcontent:として指定した「CSS」という文言が文頭に加わり、
  • 同じく::afterでcontent:指定した【使い方】という文言が文尾に加わった

ということが分かりますね。

カスタムデータ属性

HTMLの要素に独自の属性を持たせることができる擬似要素セレクターのことをカスタムデータ属性と言います。

使い方は、HTML要素に対して

「data-任意の名前=”任意のテキスト“」

とし、CSSの擬似要素のcontentプロパティで、

「content: attr(任意の名前)」

とすれば、

擬似要素に対して任意のテキストが読み込まれる

という仕組みになっています。

ではh1に対して「data-title=”（見出し）“」

pに対して「data-title=”（本文）“」

とカスタムデータ属性を入れてbefore擬似要素を使った例を挙げてみます。

data-titleとして独自に作った属性が、（見出し）、（本文）というcontentで読み込まれていることが分かりますね。

 

擬似クラス

擬似クラスは、要素の特定の状態に応じてスタイリングする場合に使います。

例えば、以下のようにしてボタンっぽい要素を作ったケースで見てみましょう。

 

HTML

<body>
<div class=”btn”>ここをクリック</div>

 

CSS

.btn {
  width: 100px;
  background: skyblue;
  text-align : center;
  padding: 4px;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

これでこのようなボタンができます。

ここをクリック

 

:hover

では、ここに擬似クラスで、マウスを当てると色が薄くなるようにしてみます。

その場合は、以下のように記述します。

  • .btn:hover {
  •   opacity: 0.7:
  • }

「.btn」の後に「：」（コロン）が1つついていますね。

この記述を噛み砕いてみると、

  • 「.btn」というクラスに対して、
  • 「:hover」というマウスを乗せたときの挙動を作る擬似クラスを当て、
  • 「opacity」というプロパティで透明度を0.7にする、

という記述になっているということになります。

これで、全体を見ると以下のとおりになります。

この「:hover」という擬似クラスはよく使われている擬似クラスですが、このように、擬似クラスは、要素の特定の状態に応じてスタイリングする場合に使うセレクターということになります。

もう一つ、擬似クラスの例を見てみましょう。

:active

擬似クラスの「:active」を使うと、マウスをクリックしたときの挙動を加えることができます。

具体例は以下のとおりです。

以下の箇所の記述を切り取って解説します。

 

CSS

.btn:active {
  box-shadow: 5px 10px 7px hsl(var(--fooColor), 55%, 65%);
  margin-top: 35px;  
}

「.btn:active」は、マウスをクリックした時の挙動を加える擬似クラスです。

:active内のスタイルにあるように、影の位置（box-shadow）と、上からのmargin（margin-top）の値を、「.btn」で設定している固定位置からずらして設定している点に注目してください。

このような設定によって、マウスをクリックしたらボックスが押し込まれたような効果が生じているのがわかりますね。

 

:nth-child

nth-child（エヌスチャイルド）は、順番を指定できる擬似クラスです。

同じ階層に並んでいる要素に対して使用できます。

例えば、以下のように<p>タグによる要素がたくさん並んでいたとします。

 

HTML

<p>nth-child</p>
<p>nth-child</p>
<p>nth-child</p>
<p>nth-child</p>
<p>nth-child</p>
<p>nth-child</p>
<p>nth-child</p>

このとき、以下のようにCSSを記述すると、3番目の色をskyblueにすることができます。

 

CSS

p:nth-child(3) {
  background-color: skyblue;
}

この記述を噛み砕いてみると、

  • 「p」という要素に対して、
  • 「:nth-child(3)」として3番目を指定する擬似クラスを当て、
  • 「background-color」プロパティで色を「skyblue」にする、

という記述になっているということになります。

これで、全体を見ると以下のとおりになります。

nth-childは理解がしやすいと思いますので、いくつかのその他の表現を紹介しておきます。

 

CSS

p:nth-child(3n) {
  background-color: skyblue;
}

と「3n」と指定すれば、3の倍数の箇所にskyblueが当たることになります。

この場合の「n」は自然数（1とか2とか3）を意味することになっています。

また、次のようなバリエーションもよく使われます。

 

CSS

p:nth-child(odd) {
  background-color: skyblue;
}

と「odd」と指定すれば奇数番目の箇所に、さらに「even」と指定すれば偶数番目の箇所にskyblueが当たることになります。

oddとevenを使って、skyblueとpinkを散りばめた場合の具体例は下のとおりです。

 

:first-child、:last-child

その他、「:first-child」や「:last-child」も同じようなロジックで擬似スタイルが当たります。

  • :first-child　→　冒頭に擬似クラスを指定可能
  • :last-child　→　最後に擬似クラスを指定可能

 

:nth-of-type

:nth-of-type（エヌスオブタイプ）は、同じ階層に並んでいる要素の種類も考慮して使用できます。

先に見た:nth-childの例では、<p>要素だけの場合でしたが、例えば、以下のように複数の要素が同じ階層に並んでいた場合などには、:nth-of-typeを使う必要が出てきます。

 

HTML

<main>
  <h1>擬似クラス</h1>
  <h2>nth-of-typeの使い方</h2>
  <p>要素の種類も考慮できます。</p>
  <p>要素の種類も考慮できます。</p>
  <h2>nth-of-typeの使い方</h2>
  <p>要素の種類も考慮できます。</p>
  <p>要素の種類も考慮できます。</p>
  <h2>nth-of-typeの使い方</h2>
  <p>要素の種類も考慮できます。</p>
  <p>要素の種類も考慮できます。</p>
</main>

このとき、以下のようにCSSを記述すると、2番目のh2の色だけを指定してskyblueにすることができます。

 

CSS h2:nth-of-type(2) { background-color: skyblue; }

この記述を噛み砕いてみると、

  • 「h2」という要素に対して、
  • 「:nth-of-type(2)」としてh2の2番目を指定する擬似クラスを当て、
  • 「background-color」プロパティで色を「skyblue」にする、

という記述になっているということになります。 これで、全体を見ると以下のようになります。

 

　Point　 :nth-of-typeは「要素の種類」も考慮している点が、:nth-childと異なる点であることを今一度理解しておきましょう。

また、:nth-of-typeは、:nth-childと同じように

  • 「n」を使った倍数の指定や、
  • 「odd」「even」で奇数番目や偶数番目の指定や、
  • 「first-of-type」「last-of-type」

が使えます。 h2に対して「first-of-type」と「last-of-type」で擬似クラスを指定した具体例は以下のとおりです。

 

:empty

:emptyは空の要素を選択できる擬似クラスになります。 以下のような例で見ていきましょう。

 

HTML

<ul>
  <li>リスト</li>
  <li></li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

liタグの2行目が空白になっていますね。

このとき、以下のようにCSSを記述すると、空白になっているliの2番目の色だけがskyblueになります。

 

CSS

li:empty {
  background: skyblue;
}

具体例は以下のとおりです。

 

　Point　

  • 空白とはいえ、スペースや改行などが入っているとそれは空白とはみなされません。
  • ただし、コメント（CSSでは「<!–  –>」）だけならそれは空白とみなされます。

 

:not

:notという擬似クラスもよく使います。

:notは否定を意味する擬似クラスになります。

上の:emptyで見たのと同じ例で見ていきましょう。

 

HTML

<ul>
  <li>リスト</li>
  <li></li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

liタグの2行目が空白になっています。

このとき、以下のようにCSSを記述すると、空白になっているliの2番目「以外の」色だけがskyblueになります。

 

CSS

li:not(:empty) {
  background: skyblue;
}

結果は以下のとおりです。

「:emptyではない箇所に」スタイルが当たっていますね。

 

まとめ

以上、セレクターの基本事項をまとめてみましたが、その他にも、CSSの基本事項を項目ごとにまとめた記事がありますので、そちらも是非参考にしてみて下さい。

なお、タイプセレクター、クラスセレクター、idセレクター、属性セレクターなど、より初歩寄りの説明についても別サイトにまとめていますので、必要に応じてタグカテゴリーから「CSS」に入ってそちらも参考にしていただければと思います。

皆さんのお役に立てれば幸いです。

 

自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！

TECH CAMPの広告リンク画像

 

併せて読みたい

» プログラミング関連記事

» ワードプレス関連記事