CSSの擬似要素と擬似クラスとは?サンプル【HTML/CSS入門】

code

CSSの擬似要素と擬似クラスについて、HTML /CSSのサンプルソースです。使いこなせるようになると、余計なタグやJavaScriptを使わずにデザインすることができます。

CSSの擬似要素【Pseudo-elements】とは?

HTMLの要素を擬似的にCSSで設定し、マークアップに影響せずに装飾の適用が可能。

CSSの擬似要素のサンプルHTML/CSS

::first-letter・・・要素の一文字目を指定

::first-line・・・要素の一行目を指定

::before・・・要素の直前にコンテンツを追加

::after・・・要素の直後にコンテンツを追加

See the Pen Pseudo-elements by uxbear (@uxbear) on CodePen.

CSSの擬似クラスとは?【Pseudo-classes】

擬似クラスとは、指定要素が特定の状態の時、スタイル適用するセレクタ
文章構造外の情報でスタイルを変化させます。

擬似クラスのサンプルHTML/CSS

:link・・・未訪問のリンク要素の指定

:visited・・・訪問済のリンク要素の指定

:hover・・・要素にマウスがホバーした際の指定

:active・・・要素がアクティブ状態になった際の指定

See the Pen Pseudo-classes by uxbear (@uxbear) on CodePen.

:nth-child(n)・・・親要素内のn番目の要素の指定

:nth-of-type(n)・・・親要素内の同じ種類の要素の中のn番目の要素

:not(N)・・・N以外の要素の指定

See the Pen Pseudo-classes-2 by uxbear (@uxbear) on CodePen.

nth-childと、nth-of-typeの違いとは?

nth-child
すべてのセレクタをカウント対象。
例) <p>を指定しても、<h1>や<h3>などもカウントされます。

nth-of-type
指定したセレクタのみカウント
例) <p>を指定すると、<h1>や<h3>などはカウント対象になりません。

そもそもセレクタとは?CSSの基本文法は3つ

CSSの構成は「セレクタ」「プロパティ」「値」の3つ。

/*-- CSSの基本構文例 --*/
p {color: #ff000;}

// p ・・・セレクタ
// color: ・・・プロパティ
// #ff0000 ・・・値

どの要素(セレクタ)で、何を(プロパティ)、どう(値)するか?

まとめ

CSSの擬似要素と擬似クラスについてと、HTML /CSSのサンプルソースでした。

JavaScriptの学習講座、エンジニアの転職

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

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

CAPTCHA