知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について

知っておきたいCSSの擬似クラスと擬似要素及び併用可否

ここでは、知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について説明します。
 

  1. 1. 代表的な擬似クラス
  2. 2. 代表的な擬似要素
  3. 3. 擬似要素と擬似クラスを一緒に使えるか、併用可否
  4. 4. まとめ

 
 

1. 代表的な擬似クラス

ある要素が特定の状態にあるときにスタイルを指定する方法に擬似クラスがあります。
 

例)

  • ある要素に対して、クリックされた状態にある時
  • ある要素に対して、カーソルが上に乗っている時

などなど。
 

擬似クラスは、以下のように指定します。

セレクタ:擬似クラス{
 任意のCSS設定
}

で指定します。
 

代表的なものとしてマウスがある要素上に載ったら色や形を変えるなどがあります。

 
 

ここでは、いくつかの代表的な擬似クラスについて説明していきます。
 
 

1-1. 最初の要素 first-child

ある要素のうちの最初の要素の指定を「first-child」で行います。

■設定例(liの最初の要素)

 

■表示例
CSS 擬似クラス first-child
 
 

1-2. 最後の要素 last-child

ある要素のうち、最後の要素の指定を「last-child」で行います。

■設定例

 

■表示例
CSS 擬似クラス last-child
 
 

1-3. n番目の指定方法 nth-child(数字)

ある要素のうち、自分が指定したい任意の要素の指定を「nth-child(自分の指定したい数字)」で行います。
 

なお、(自分の指定したい数字)に「even」を指定すると偶数番目、「odd」を指定すると奇数番目となります。
 

■設定例(3番目のli要素を指定)

 

■表示例
CSS 擬似クラス nth-child(3)
 
 

1-4. 指定した擬似クラスを除外 :not(除外したい擬似クラス)

指定した擬似クラスを除外するには、:not(除外したい擬似クラス)で指定します。
 

■設定例(最後のli要素:last-childを除外して文字を赤色の設定)

 

■表示例
li要素の最後の子要素をnotで除外
 
 

1-5. 未訪問リンク :link

まだクリックされたことのないリンク(未訪問リンク)を:linkで指定します。

■設定例(未訪問リンクをピンク色)

 

■表示例
CSS 未訪問リンク :link
 

1-6. 訪問済みリンク :visited

すでにクリックされたことがあるリンク(訪問済みリンク)を:visitedで指定します。
 

■設定例

 

■表示例

 

なお、訪問したか未訪問かは各ブラウザごとに保持しています。
 

そのため、Chromeで一度訪問しても、同じPCのSafariでアクセスすると未訪問状態になっています。
 
 

1-7. マウスが乗っている時 :hover

マウスがある要素上にある時にスタイルを「:hover」で指定します。
 

a:hover{}を指定してリンク先にカーソルを合わさった状態の時に色を変えるなどはよくある例です。
 

■設定例

 
 

■表示例

 

クリックしなくてもマウスカーソルが要素上にあるだけでhoverが適用されることに注意してください。
 
 

1-8. マウスをクリックした時 :active

マウスをクリックした時にスタイルを「:active」で指定します。
 

■設定例

 

■表示例

 
 

1-9. フォーカスしている時 :focus

テキストボックスなどでカーソルを置いている(フォーカス)しているときにスタイルを「:focus」で指定します。
 

■設定例

 

■表示例

 
 

2. よく使う擬似要素

擬似クラスの他に、擬似要素というものがあります。
 

擬似要素は以下のように指定します。

セレクタ::擬似要素{
任意のスタイル…
}

 

なお、擬似クラスがある要素が特定の状態になったときに指定する方式(状態の変化に対する指定方式)なのに対して、
 

擬似要素は、(状態の変化に関わらず)要素の一部を追加で指定する方法です。
 

(擬似要素と擬似クラスという表現がややこしいですね。。)
 

擬似要素を利用することで、HTMLコードに不要なタグやコードを減らしつつ、要素内の特定の文字や行に対して色々なスタイルを設定することができます。
 
 

2-1. ある要素内の最初の文字

ある要素の最初の文字だけスタイルを指定するには「::first-letter」を利用します。
 

■設定例

 

■表示例
CSS 擬似要素 first-letter
 
 

2-2. ある要素の直前に作成する擬似要素 ::before

最近のWebページでとてもよく使う擬似要素に、beforeとafterがあります。
 

ある要素の直前に擬似的な要素を作成するには擬似要素「::before」を利用します。
 

少し独特な記述ですが、before{}のなかにcontent:’任意の文字’;という記述をする必要があります。
 

任意のセレクタ::before{
content:”;
任意のスタイル設定…
}

 

■設定例

 
 

■表示例
CSS 擬似要素 before
 

なお、before、afterはインライン要素のため、widthやheightなどの大きさを設定する場合は「display:blockまたはdisplay:inline-block」を設定しましょう。
 
 

2-3. ある要素の直後の要素

beforeとほぼ同じ性質の擬似要素で、ある要素の直後に擬似的な要素を作成するには擬似要素「::after」を利用します。
 

■設定例

 

■表示例
CSS 擬似要素 afterとbefore
 
 

2-4. before,afterの応用例

はじめてbeforeやafterを学び出すと、「これって使うシーンあるのかな??」と疑問に思う方もいるかもしれません。
 

ここでは、応用例として、before,afterを利用した応用例を紹介します。
 

漫画のような吹き出し

下記のようにbefore要素を利用して漫画のような吹き出しを作成できます。before要素は吹き出しの三角部分で利用しています。
 

■表示例
CSS beforeとafterを使った応用例 漫画のような吹き出し
 

■上記のソースコード

 
 

3. 擬似要素と擬似クラスを一緒に使えるか、併用可否

最後に、擬似要素と擬似クラスの組み合わせを簡単にご紹介します。
 

beforeやafterなどの擬似要素に対して擬似クラスhoverを適用したいなどの場合、下記のように動作しますのでご注意ください。
 

:擬似クラス::擬似要素は動作する
例. :hover::afterは動作する
 

::擬似要素:擬似クラスは動作しない
例. ::after:hoverは動作しない
 
 

3-1. 擬似クラスと擬似要素の併用の例

ここでは、下記のようなHTMLサンプルで動作を説明してみたいと思います。

上記例に対して

擬似要素:擬似クラス
例. div::after:hover{}
のように指定してもafter要素に対してはhoverで指定した内容が動作しませんでした。

 
一方、擬似クラス::擬似要素
例. div:hover::after
のように指定するとafter要素に対してhoverで指定した内容が動作しました。

 
動画でお見せすると以下のようになります。

 
 
 

参考サイト
擬似クラスと擬似要素
 

4. まとめ

まとめです。
 

今回は、擬似クラスと擬似要素、およびその組み合わせ併用可否について説明しました。
 

擬似クラスは、ある要素が特定の状態になった時に指定するスタイル方式
 

擬似要素は、ある要素の一部を指定するスタイル方式です。
 

擬似クラスと擬似要素の併用ですが、
 

:擬似クラス::擬似要素は動作する(例. :hover::afterは動作する)のに対して、
 

::擬似要素:擬似クラスは動作しない(例. ::after:hoverは動作しない)ことにご注意ください。
 

とくに擬似クラス(:hover)や擬似要素(::before、::after)などは至るところのWebページで使われているので、最初は慣れないかもしれませんが、ぜひ覚えていってくださいね。
 
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。

継続6ヶ月コース

通常 15万円【2017年中】12万円(税抜)
ホームページ作成からWeb集客まで一通り習得したい方向けのコースです。

お試し1ヶ月コース

通常3万円【2017年中】2万円(税抜)
特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコースです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ