*

ウェッブ制作

Width =px

ホーム > HTML・CSS > CSS基本と応用 >
疑似クラスと疑似要素 MENU 

疑似クラスと疑似要素 一寸解りにくいCSSが非常に便利

このページでは、よく使う便利なものに絞っています。

1.疑似クラスと疑似要素の違い

一言で、疑似クラス:要素全体、疑似要素:要素の一部。まずは以下の事例を。

  • 疑似クラス :hover
  • 疑似要素 ::first-letter
  • ここにマウスを重ねる

  • 最初の文字だけ変化

  • 先頭の記号 : (コロン1つ)

      
  • 先頭の記号 :: (コロン2つ)

2.疑似クラス

(1)aタグ(リンク)と疑似クラス

  • 疑似クラス
  • 表示
  • コード
  • 1
  • a:link
    未訪問
  • 2
  • a:visited
    訪問済み
  • 3
  • a:hover
    マウスが重なった時
  • 4
  • a:active
    マウスクリックから離れる迄

1. と 2. の「表示見本」は、変化しません。

(2)利用範囲が広い :hover & (first , nch , last)-child

link visited は、aタグにしか使えないが、 hover は色々な使い方が出来る。また、 first-child 等は、リスト形式で表示する場合は、とても便利です。

事例-1 マウスを重ねると隠れているテキストと画像が表示される。

空白の領域にマウスを重ねて下さい。

  • :hover
  • 表示見本

    人物

概説 この事例の場合、親は line_ul で 子供は li になる。

first-child は、1番目の子供 <li>あいうえお</li>

nth-child(n+2) は、2番目の子供から最後迄。 (2)を指定した場合は、2番目の子供。

last-child は、最後の子供。

(3) (first , nch , last )-of-type

1.あいうえお

2.かきくけこ

3.さしすせそ

4.たちつてと

5.なにぬねの

6.はまやらわ

(4) first-child と first-of-type の違い

事例1 :first-child

1.あいうえお

2.かきくけこ

事例2 :first-of-type

1.あいうえお

2.かきくけこ

事例3 :first-child

1.あいうえお

2.かきくけこ

事例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.さしすせそ

事例2:nth-of-type(2)

1.あいうえお

2.かきくけこ

3.さしすせそ

事例3:nth-of-type(n+1)

1.あいうえお

2.かきくけこ

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.疑似要素

疑似要素の事例(+疑似クラス)

  • 疑似要素
  • 表示
  • ::first-letter
  • こんにちは
  • ::first-line
  • こんにちは
    ご機嫌よう
  • ::before
  • こんにちは
  • ::after
  • こんにちは

疑似要素の事例ですが、表の中に入れている関係で、追加として疑似クラスの事例も記述している。疑似クラスのセレクタに疑似要素を付けた事例を記述。

補足1:列(li)は3列なので、li:nth-child(3) li:last-child と記述しても同じ。

補足2:行(ul)は5行なので、ul:nth-child(5) ul:last-child と記述しても同じ。