【初心者CSS】忘れやすいCSS疑似要素・疑似クラスまとめ

CSSの疑似要素、疑似クラス、使ってますか？

わたしは:hoverくらいしか知らなくて、数年ぶりにCSSを触ったときいろいろな疑似要素があってびっくりしました。
ってかいまだにちゃんと覚えてはいないです。

なので自分の為にもまとめてみました。
適当にクラスつけちゃったんでわかりにくかったらごめんなさい…

忘れやすいCSS疑似要素・疑似クラス

疑似要素・疑似クラスとは？

「:link」「:hover」はなんとなく使っている人が多いと思うんですけどこれは疑似クラス。
最近（？）よく見るA:nth-child(n)も疑似クラス。

対して「::first-letter」「::first-line」「::befor」「::after」などは疑似要素。
コロンが二つですね。

むかしは疑似系はなんでもかんでもコロンひとつだったと思うんですが、違いましたっけね。
まあそんなこんなでCSS3から疑似要素・疑似クラスを分けるために疑似要素はコロンが二つになったそうです。
頑張ります。覚えます。

疑似要素

::first-letter

要素の一文字目にスタイルを指定。
海外のおしゃれーなサイトで一文字目を大きくしたりしたりしているアレですね。

HTML

<p class="firstl">
吾輩は猫である。名前はまだ無い。
</p>

CSS

.firstl::first-letter { background-color: plum; }

::first-line

要素の一行目にスタイルを指定。行です。行。

HTML

<p class="firstline">吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

CSS

.firstline::first-line { background-color: plum; }

::before

要素の前にコンテンツ（文字でも記号でも）を追加。これはよく使います。
このサンプルではfontawesomeを使用しました。

HTML

<p class="bf">吾輩は猫である。名前はまだ無い。</p>

CSS

.bf::before { content: "\f14a"; font-family: FontAwesome;}

::after

要素の後ろにコンテンツ（文字でも記号でも）を追加。
NEW!という文字列を赤で追加しています。

HTML

<p class="af">吾輩は猫である。名前はまだ無い。</p>

CSS

.af::after { content: "NEW!"; color:red; }

疑似クラス

:first-child

親要素のなかの最初の子要素にスタイルを指定。

HTML

<ul class="first">
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
</ul>

CSS

.first li:first-child { background-color: plum; }

:last-child

親要素のなかの最後の子要素にスタイルを指定。

HTML

<ul class="last">
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
</ul>

CSS

.last li:last-child { background-color: plum; }

:nth-child(n)

親要素内のn番目の子要素にスタイルを指定。
サンプルでは偶数行にスタイルを指定しています。

HTML

<ul class="twon">
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
</ul>

CSS

.twon li:nth-child(2n) { background-color: plum; }

:nth-child(n-1)

親要素内のn-1番目の子要素にスタイルを指定。
サンプルでは奇数行にスタイルを指定しています。

HTML

<ul class="twonone">
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
</ul>

CSS

.twonone li:nth-child(2n-1) { cbackground-olor: plum; }

:not(X)

X以外の子要素にスタイルを指定します。
けっこう便利だと思う。
サンプルだと「最初の子要素以外にはスタイルを適用」になります。

HTML

<ul class="firstnot">
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
 	<li>サンプル</li>
</ul>

CSS

.firstnot li:not(:first-child) { background-color: plum; }

 
もちろんlast-childと書けば「最後の子要素以外」になります。

 
たとえば最終行だけ罫線いらないなあ、ってときがあるわけですよ。
そんな時に使うといいと思うんですよ。
こんなかんじで。

リストを横並びにしてボーダーで区切ったメニューを作る、なんて時によく利用されるイメージ。

「-of-type」のはなし

-childではなく-of-type、と書くこともできます。

childとの違いなんですが、例えば「いちぎょうめ」だけ目立たせたい、ってとき。

CSS

#sample p:first-child { background-color: plum; }

じゃ効かないんですよね…
なぜなら「h5」も「初めの子要素」とみなされちゃうから。「最初の子要素がpのときだけ！」、じゃないと効かないんです。
そんなときは-of-typeを使うわけです。

#sample2 p:first-of-type { background-color: plum; }

忘れやすいCSS疑似要素・疑似クラス　まとめ

疑似要素・疑似クラスの使い方、自分でもわかんなくなる時があったのでまとめてみました。