C-8. 擬似要素、擬似クラス

2021.12.22

::beforeと::afterの設定方法を知っておこう

「:before」や「:after」は特定の要素の前と後に擬似的なスタイルを挿入することができます。

実行して違いを確認しておきましょう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <style>
    h1:before {
    content: "♥";
    color: #3266df;
    }
    p:before {
    content: "★";
    color: #b20000;
    }
    strong:before {
    content:"【";
    color: #00ff00;
    }
    strong:after {
    content:"】";
    color: #00ff00;
    }
  </style>
 
  <body>
    <h1>beforeの擬似要素をつかってh1が♥になります。</h1>
    <p>特定のセレクタにbefore擬似要素の★を追加します。</p>
    <p>「before擬似要素」を使うと指定の要素の前にテキストやアイコンを挿入することができます。</p>
    <p><strong>after擬似要素</strong>を使うと指定の要素の後ろにテキストやアイコンを挿入できます。</p>
  </body>

疑似要素には、いくつかパターンがあります。MDN CSS: カスケーディングスタイルシート ::before (:before) 参照

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 画像を使う場合 */
div::before{
    content: url(画像パス);
}
 
div::after{
    content: url(画像パス);
}
 
/* 空の指定の場合 */
div::before{
    content:"";
}
 
div::after{
    content:"";
}

::hover擬似クラス

指定した要素にカーソルが重なっている、いわゆるオンマウスの時のスタイルを指定する擬似クラスです。

記述して実行してみよう！

XHTML
1
2
3
4
5
6
7
8
9
<style>
    a:hover{
    color: red;
    }
</style>
 
<body>
　<a href="https://techup.tokyo/">hoverのテスト　カーソルを近づけると色が変わります。</a>
</body>

擬似クラス にも多くのクラスのパターンがあります。MDN CSS: カスケーディングスタイルシート 擬似クラス 参考

cursor

マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

記述して実行してみよう！

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  .foo {
    cursor: crosshair;
  }
  .bar {
    cursor: zoom-in;
  }
  .baz {
    width: 200px;
    height: 100px;
    border: #000 1px solid;
    cursor:url("https://techup.shop/wp-content/uploads/2021/10/favicon.png"), auto;
  }
</style>
 
<body>
    <div class="foo" >マウスを置くとこうなります。</div>
    <div class="bar">マウスを置くかわります。</div>
    <div class="baz" >カーソル表示</div>
</body>

MDN CSS: カスケーディングスタイルシート cursor 参考

課題

MDN 擬似クラスのページを参考に標準擬似クラスの中から 、どれか一つを使って、下記のファイルを参照に、自身でアレンジしてください。 作成したファイル名をindex_2_18.htmlにして送ってください。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Level2-18 課題用</title>
  <style>
    .sample{
     font-size: 30px;
    }
    a:hover {
      color:red;
    }
  </style>
</head>
  <body>
    <div>
      <a class="sample"　href="https://techup.shop">サンプルリンク</a>
    </div>
  </body>

ヒント

自由作成のため、記載するコードはありませんが、どうしても思いつかない人は、

以下の項目から一つ選び、仕組みを作るために想像したり、検索してみたりしてください！
・チェックボックスにチェックを入れると、文字が大きくなる。

・この文字をクリックすると、下の文字の色が変わる

課題・復習用検索ワード

検索例
🔍CSS　擬似クラス　仕組み
🔍CSS　マウスかざす　大きさ変わる
🔍CSS　擬似クラス　できること