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の基本文法は３つ
CSSの構成は「セレクタ」「プロパティ」「値」の3つ。
/*-- CSSの基本構文例 --*/
p {color: #ff000;}
// p ・・・セレクタ
// color: ・・・プロパティ
// #ff0000 ・・・値どの要素（セレクタ）で、何を（プロパティ）、どう（値）するか？
まとめ
CSSの擬似要素と擬似クラスについてと、HTML /CSSのサンプルソースでした。
JavaScriptの学習講座、エンジニアの転職
