疑似要素？疑似クラス？

cssの勉強をはじめて最初のうちはなにがなんだかよくわからない疑似モノ・・・

きちんとした日本語で書かれているページはたくさんありましたが、どうも日本語の理解力が乏しいのでピンとくる説明にたどり着けず・・・

なので、自分なりにまとめました。

疑似要素とは？？

コロンふたつの疑似要素。

::before

::after

::first-letter

など。

要素内の一部に対してスタイルを効かせる。

要素内にないものを疑似的に作り出す。

という感じ。

html上にはないけれどcssで要素を疑似的に作り出す・・・というイメージです。（感想には個人差があります）

たとえば・・・

要素内の前にスタイルを効かせる。

要素内の一部に対してスタイルを効かせる。

<p class="before">要素内の一部に対してスタイルを効かせる。</p>
p.before::before{
  content:"☆";
  color:red;
}

p.beforeタグのbefore(前)に☆をつける。というようなことができます。

メニュー項目の前にアイコンをつけたり、見出しの前に印をつけたり、などです。

要素内の後ろにスタイルを効かせる。

要素内の一部に対してスタイルを効かせる。

<p class="after">要素内の一部に対してスタイルを効かせる。</p>
p.after::after{
  content:"おわり";
  color:red;
}

p.afterタグのafter(後)におわりと追加する。というようなことができます。

文章の最期に決まったフレーズをつけたり、などです。

要素内の前後にスタイルを効かせる。

こんにちは

<p class="greeting">こんにちは</p>
p.greeting::before{
  content:"「";
  color:red;
}
p.greeting::after{
  content:"」";
  color:red;
}

文章の前後に鍵括弧をつけるようなこともできます。

要素内の最初の文字にスタイルを効かせる。

要素内の一部に対してスタイルを効かせる。

<p class="first-letter">要素内の一部に対してスタイルを効かせる。</p>
p.first-letter::first-letter{
  font-size:1.5rem;
  color:red;
}

p.first-letterタグの最初の一文字を装飾する。というようなことができます。

疑似クラスとは？？

コロンひとつの疑似クラス。

:hover

:first-child

など。

要素全体にスタイルを効かせる。

要素の状態によって疑似的にクラスを付け足す。

という感じ。

条件によって違うcssを効かせることが出来る・・・というイメージです。（感想には個人差があります）

たとえば・・・

要素にホバーしたときにクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

<p class"hover">要素の状態によって疑似的にクラスを付け足す。</p>
p.hover:hover{
  color:red;
}

要素にカーソルが乗ったときに文字を赤くする。というようなことができます。

複数要素の最初の要素にクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

<p class="f-child">要素の状態によって疑似的にクラスを付け足す。</p>
<p class="f-child">要素の状態によって疑似的にクラスを付け足す。</p>
<p class="f-child">要素の状態によって疑似的にクラスを付け足す。</p>
<style>
p.f-child:first-child{
  color:red;
}
</style>

:first-child の他に :last-child や :nth-child などもあります。

複数要素の2の倍数ごとにクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

要素の状態によって疑似的にクラスを付け足す。

<p class="n-child">要素の状態によって疑似的にクラスを付け足す。</p>
<p class="n-child">要素の状態によって疑似的にクラスを付け足す。</p>
<p class="n-child">要素の状態によって疑似的にクラスを付け足す。</p>
<p class="n-child">要素の状態によって疑似的にクラスを付け足す。</p>
p.n-child:nth-child(2n){
  color:red;
}

:nth-child は偶数(奇数)行に背景色を指定して読みやすくする、なんてことが出来ます。

疑似クラスで背景色を指定していればhtmlで行の追加削除をしてもcssを書き換える手間が省けますね！