疑似クラスと疑似要素 一寸解りにくいCSSが非常に便利
このページでは、よく使う便利なものに絞っています。
1.疑似クラスと疑似要素の違い
一言で、疑似クラス:要素全体、疑似要素:要素の一部。まずは以下の事例を。
- 疑似クラス :hover
- 疑似要素 ::first-letter
ここにマウスを重ねる
最初の文字だけ変化
-
12<-- html--><p class="g_cls1">ここにマウスを重ねる</p>12345/* css */p.g_cls1:hover{color:red;font-weight:bold;letter-spacing:0.5em;}
先頭の記号 : (コロン1つ)
-
12/*html */<p class="g_yos1">最初の文字だけ変化</p>12345/* css */p.g_yos1::first-letter{color:red;font-weight:bold;font-size:1.5em;}
先頭の記号 :: (コロン2つ)
2.疑似クラス
(1)aタグ(リンク)と疑似クラス
- 順
- 疑似クラス
- 表示
- コード
- 1
- a:link
未訪問 -
1<p class="link_1"><a>表示見本</a></p>1.link_1 a:link{color:blue;}
- 2
- a:visited
訪問済み -
1<p class="link_2"><a>表示見本</a></p>1.link_2 a:visited{color:yellow;}
- 3
- a:hover
マウスが重なった時 -
1<p class="link_3"><a>表示見本</a></p>1.link_3 a:hover{color:green;}
- 4
- a:active
マウスクリックから離れる迄 -
1<p class="link_4"><a>表示見本</a></p>1.link_4 a:active{color:red;}
1. と 2. の「表示見本」は、変化しません。
(2)利用範囲が広い :hover & (first , nch , last)-child
link や visited は、aタグにしか使えないが、 hover は色々な使い方が出来る。また、 first-child 等は、リスト形式で表示する場合は、とても便利です。
事例-1 マウスを重ねると隠れているテキストと画像が表示される。
空白の領域にマウスを重ねて下さい。
- :hover
表示見本
1 2 3 4 5 6 7 8 |
<!-- html --> <ul class="line_ul"> <li>:hover</li> <li><p>表示見本</p> <img src="url" /></li> <li><time>2019-05-20</time></li> </li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 |
/* css */ .line_ul li:first-child{ /* 最初の列 */ font-size:1.5em; margin-bottom:10px;} .line_ul li:nth-child(n+2) { /* 2列目から最後迄 */ visibility:hidden; /* 非表示 */ padding:2px 10px;} .line_ul:hover li:nth-child(n+2) { /* 2列目から最後迄 */ visibility:visible;} /* 表示 */ .line_ul:hover li:last-child { /* 最後の列 */ text-align:right;} |
概説 この事例の場合、親は line_ul で 子供は li になる。
☆ first-child は、1番目の子供 <li>あいうえお</li>。
☆ nth-child(n+2) は、2番目の子供から最後迄。 (2)を指定した場合は、2番目の子供。
☆ last-child は、最後の子供。
(3) (first , nch , last )-of-type
2.かきくけこ
4.たちつてと
5.なにぬねの
1 2 3 4 5 6 7 8 9 |
<!-- html --> <div class="of_type"> <div>1.あいうえお</div> <!-- divの1番目 --> <p>2.かきくけこ</p> <!-- pの1番目 --> <div>3.さしすせそ</div> <!-- divの2番目 --> <p>4.たちつてと</p> <!-- pの2番目 --> <p>5.なにぬねの</p> <!-- pの3番目 --> <div>6.はまやらわ</div> <!-- divの最後 --> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 |
/* css */ .of_type p:first-of-type{ /* 1番目のpタグに → 「2.かきくけこ」が該当*/ background-color: lightgreen; } .of_type p:nth-of-type(2){ /* 2番目のpタグに「4.たちつてと」が該当 */ background-color: yellow; } .of_type p:last-of-type{ /* 最後ののpタグに「5.なにぬねの」が該当 */ background-color: bisque; } .of_type div:last-of-type{ /* 最後のdivタグに「6.なにぬねの」が該当 */ background-color: aquamarine;} |
(4) first-child と first-of-type の違い
事例1 :first-child
1 2 3 4 5 |
<!-- html --> <div class="first1"> <p>1.あいうえお</p> <div>2.かきくけこ</div> </div> |
1 2 3 |
/* css */ .first1 div:first-child{ background-color: gold;} |
1.あいうえお
事例2 :first-of-type
1 2 3 4 5 |
<!-- html --> <div class="first2"> <p>1.あいうえお</p> <div>2.かきくけこ</div> </div> |
1 2 3 |
/* css */ .first2 div:first-of-type{ background-color: gold;} |
1.あいうえお
事例3 :first-child
1 2 3 4 5 |
<!-- html --> <div class="first3"> <p>1.あいうえお</p> <div>2.かきくけこ</div> </div> |
1 2 3 |
/* css */ .first3 p:first-child{ background-color: gold;} |
1.あいうえお
事例1:htmの2ライン目のdiv内の最初のタグが「p」、cssでは「div」に first-child の指定なので、適用されない。
事例2:cssは first-of-type に「div」 指定なので、最初のdivに適用される。
事例3:htmの最初のタグが「p」、cssでは「p」に first-child の指定なので、適用される。
(5) nth-child と nth-of-type の違い
事例1:nth-child(2)
1 2 3 4 5 6 |
<!-- html --> <div class="nth1"> <p>1.あいうえお</p> <div>2.かきくけこ</div> <p>3.さしすせそ</p> </div> |
1 2 3 |
/* css */ .nth1 p:nth-child(2){ background-color: gold;} |
1.あいうえお
3.さしすせそ
事例2:nth-of-type(2)
1 2 3 4 5 6 |
<!-- html --> <div class="nth2"> <p>1.あいうえお</p> <div>2.かきくけこ</div> <p>3.さしすせそ</p> </div> |
1 2 3 |
/* css */ .nth2 p:nth-of-type(2){ background-color: gold;} |
1.あいうえお
3.さしすせそ
事例3:nth-of-type(n+1)
1 2 3 4 5 6 |
<!-- html --> <div class="nth3"> <p>1.あいうえお</p> <div>2.かきくけこ</div> <p>3.さしすせそ</p> </div> |
1 2 3 |
/* css */ .nth3 p:nth-of-type(n+1){ background-color: gold;} |
1.あいうえお
3.さしすせそ
事例1: p:nth-child(2)は、2番目の要素でそれがcssの指定のpで無く、divの為に適用されない。
事例2: p:nth-of-type(2)は、p要素だけ数えるので、pの2番目となる。
事例3: p:nth-of-type(n+1)は、最初から最後までの p要素だけ数えるので、pの全部が対象となる。
2つの違い :nth-child は、子供を要素に関係なく数え、nth-of-type は子供の要素に合わせて数える。
3.疑似要素
疑似要素の事例(+疑似クラス)
- 1
- 疑似要素
- 表示
- 2
- ::first-letter
- こんにちは
- 3
- ::first-line
- こんにちは
ご機嫌よう
- 4
- ::before
- こんにちは
- 5
- ::after
- こんにちは
疑似要素の事例ですが、表の中に入れている関係で、追加として疑似クラスの事例も記述している。疑似クラスのセレクタに疑似要素を付けた事例を記述。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- html --> <div class="hyo_3_1"> <ul> <li>1</li><li>疑似要素</li><li>表示</li> </ul> <ul> <li>2</li><li>::first-letter</li><li>こんにちは</li> </ul> <ul> <li>3</li><li>::first-line</li><li>こんにちは<br>ご機嫌よう</li> </ul> <ul> <li>4</li><li>::before</li><li>こんにちは</li> </ul> <ul> <li>5</li><li>::after</li><li>こんにちは</li> </ul> </div> |
1 2 3 4 5 6 7 8 9 10 |
/* css */ .hyo_3_1 li:nth-child(3){font-weight:bold;} /* 全3列目 太字 */ .hyo_3_1 ul:nth-child(2) /* 2行目 */ li:last-child::first-letter{color:red;} /* 最終列 first-letter 最初の文字色を赤 */ .hyo_3_1 ul:nth-child(3) /* 3行目 */ li:nth-child(3)::first-line{color:red;} /* 3列目 first-line 最初の行の文字色を赤 */ .hyo_3_1 ul:nth-child(4) /* 4行目 */ li:nth-child(3)::before{content:"※";} /* 列目 before 文字列の前に※を挿入 */ .hyo_3_1 ul:nth-child(5) /* 5行目 */ li:nth-child(3)::after{content:"!!";} /* 3列目 after 文字列の後ろに!!を挿入 */ |
補足1:列(li)は3列なので、li:nth-child(3) は li:last-child と記述しても同じ。
補足2:行(ul)は5行なので、ul:nth-child(5) は ul:last-child と記述しても同じ。