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

本記事は広告が含まれる場合があります CSS

CSS擬似クラスと擬似要素および併用可否について

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

 

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト


 

代表的な擬似クラス

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

例)

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

などなど。
 

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

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

で指定します。
 

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


 
 

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

最初の要素 first-child

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

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

 

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

最後の要素 last-child

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

■設定例

 

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

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

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

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

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

 

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

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

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

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

 

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

未訪問リンク :link

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

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

 

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

訪問済みリンク :visited

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

■設定例

 

■表示例


 

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

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

マウスが乗っている時 :hover

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

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

■設定例

 
 

■表示例


 

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

マウスをクリックした時 :active

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

■設定例

 

■表示例


 
 

フォーカスしている時 :focus

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

■設定例

 

■表示例


 

link、visited、hover、activeの順番

4つの擬似クラス(:link、visited、hover、active)の少し特殊な仕様として、4つの擬似クラスCSSの記述順序は下記の順番で記述する必要があります。

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

 

■記述例

 

順番が上記の順でない場合は、正しく動作しないという場合がありますので、注意しましょう。
 

よく使う擬似要素

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

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

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

 

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

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

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

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

ある要素内の最初の文字

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

■設定例

 

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

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

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

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

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

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

 

■設定例

 
 

■表示例
CSS 擬似要素 before
 

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

ある要素の直後の要素

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

■設定例

 

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

before,afterの応用例

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

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

漫画のような吹き出し

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

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

■上記のソースコード

 
 

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

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

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

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

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

擬似クラスと擬似要素の併用の例

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

上記例に対して

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

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

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

 
 
 

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

まとめ

まとめです。
 

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

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

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

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

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

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

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

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

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS