*

PC LIFE

ホーム >  Web制作 >  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
  • 表示見本

    人物

(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

1.あいうえお

2.かきくけこ

3.さしすせそ

事例2 :nth-of-type

1.あいうえお

2.かきくけこ

3.さしすせそ

事例1: p:nth-child(2)は、2番目の要素でそれがcssの指定のpで無く、divの為に適用されない。

事例2: p:nth-of-type(2)は、p要素だけ数えるので、pの2番目となる。

事例3:

2つの違い :nth-child は、子供を要素に関係なく数え、nth-of-type は子供の要素に合わせて数える。

3.疑似要素

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

  • 疑似要素
  • 表示
  • ::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 と記述しても同じ。