擬似クラスと擬似要素

擬似要素

1.#element p#element1に『::first-letter{color: #ff0033;}』を設定

→１文字目だけ赤くなる

2.#element p#element2に『::first-line{color: #3300ff;}』を設定

→前に『がつく

3.#element p#element3に『::before{content: "★";}』を設定

→前に★がつく

2.#element p#element3に『::after{content: "◆";}』を設定

→前に◆がつく

これをマスターするとHTMLを書き加えることなく様々な表現ができるようになります。頑張ってみてください。

擬似クラス

リンク系

1.#class a:linkに{color: #ff0000;}を設定

→リンクの文字色が赤になる

2.#class a:visitedに{color: #bb00ff;}を設定

→このページは訪問済みなので、文字色が紫になる

3.#class a:hoverに{color: #0000ff;}を設定

→リンクにカーソルを乗せた時に文字色が青くなる

4.#class a:activeに{color:#ff6600;}を設定

→クリックしたときの一瞬オレンジになる

:visitedの内容は:link、:hover、:activeによって上書きされるため上から順に記述します。

n番目の要素にスタイルを適用

1.#class2 div h3に『:nth-child(2){color: #ff0000;}』を設定

→2番目の子要素がh3なら赤になるはず…2番目の子要素はh3ではないので変化なし

2.#class2 div h3に『:first-child{color: #009900;}』を設定

→1番目の子要素がh3なら緑になる

3.class2 div pに『:last-child{color: #990099;}』を設定

→最後の小要素がpなら紫になる

4.class2 div p:first-of-typeに{color: #0000ff;}を設定

→pの中で初めの(小要素2 【p-1】)が青になる

5.class2 div h3に『:nth-of-type(2){color: #ff6600;}』を設定

→h3の中で2番目(小要素5 【h3-2】)がオレンジになる

6.class2 div h3に『:last-of-type{color: #ff3399;}』を設定

→h3の中で最後(小要素7 【h3-3】)がピンクになる

例えば最後のpの下だけマージンを大きくする、などのように使います。
:nth-child(n)と:nth-of-type(n)の違いに注意してください。使いやすいのは:nth-of-type(n)だと思います。

応用編

1.#class3 ul liに『:nth-of-type(even){background-color: #ffcccc;}』を設定

→偶数行の背景がピンクになる

2.#class3 ul liに『:nth-of-type(3n){color: #3300ff;}』を設定

→3の倍数行の文字が青になる

2.#class3 ul liに『:nth-of-type(3n){color: #3300ff;}』を設定

→3の倍数行の文字が青になる

擬似クラスと擬似要素を組み合わせることもできます。
#class3 ul liに『:nth-of-type(5n+1)::after{content: "★";color: #ff6600;}』を設定すると、5の倍数+1(1,5,11,16…)の後ろにオレンジの★がつきます。