HTML5で定義された擬似クラスを現役デザイナーが解説【初心者向け】

初心者向けにHTML5で定義された擬似クラスについて解説しています。擬似クラスを使うと指定の条件にある要素にスタイルを適用することができます。擬似クラスの一覧とそれぞれの適用範囲、利用した場合のスタイル適用状態を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTML5で定義された擬似クラスについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTML5で定義された擬似クラスについて詳しく説明していくね!

大石ゆかり

お願いします!

 

疑似クラスとは

擬似クラスは指定された要素に対して何か特定のアクションを起こしたり、要素の特定の個所にだけ特別なスタイルを当てたいときなどに使用します。よく見かけるのが、要素:hoverですよね。これは、特定の要素に対してマウスオーバーされたときは別のスタイルを当てますよ、というときに用います。

言い換えると「要素」が「●●の場合」と指定してあげる、ということになります。

 

HTML5で定義された擬似クラスについて

疑似クラスについては下記のようなものがHTMLの中で定義されています。

  • :link クリックされていない場合のリンクのスタイルを指定する
  • :visited 一度でもクリック済みのリンクのスタイルを指定する
  • :active クリックした瞬間のスタイルを指定する
  • :hover 要素内にカーソルが載った場合のスタイルを指定する
  • :focus タッチデバイスでタップしたり、tabキーで移動した時のスタイルを指定する
  • :target 指定したIDへのリンクがクリックされた時にあたるスタイルを指定する
  • :nth-child(●) すべての要素の●番目にスタイルを指定する
  • :nth-last-child(●) すべての要素の最後から数えて●番目にスタイルを指定する
  • :nth-of-type(●) 並んでいる要素の●番目にスタイルを指定する
  • :nth-last-of-type(●) 並んでいる要素の最後から数えて●番目にスタイルを指定する
  • :first-child すべての要素の最初を指定する
  • :last-child すべての要素の最後を指定する
  • :first-of-type 並んでいるの要素の最初を指定する
  • :last-of-type 並んでいる要素の最後を指定する
  • :not(要素A) 要素A以外のものにスタイルを指定する
  • :enabled 選択、クリック、入力などがされた要素を指定する
  • :checked チェックボックスにチェックが付いたときのスタイルを指定する

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

疑似クラスを使ってみよう

いろいろありますが、初心者でもよく使うhoverを用いて、コードを書いてみましょう。

HTML

<div class="hoge">マウスを上に当てると黒から赤に変わるよ</div>

CSS

.hoge{

  color:#000;

}

.hoge:hover{

  color:red;

}

特にhoverはよく使う疑似クラスですし、初心者でも簡単に使うことができるので是非覚えておきたいですね。

 

監修してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、

現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。