はじめに

セレクタについて、個人的に理解が浅かった部分を備忘録として残す

擬似要素

擬似要素は、要素の一部に対してCSSを適用させたい場合に用いられる

sample.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .gizi::before{
            content: "『";
            color: red;
        }
        .gizi::after{
            content: "』";
            color: blue;
        }
    </style>
</head>
<body>
    <p class="gizi">Yamada Tarou</p>
</body>
</html>

::beforeはその要素の前に、::afterはその要素の後に適用される
他にも、その要素の一文字目にCSSを適用させる::first-letterがある
（ただしこれはブロック要素にしか適用されない）

擬似クラス

擬似クラスは、指定の要素が特定の状態にあるときにのみCSSを適用させるといったものである
例えば、マウスカーソルがその要素の上にあるときにのみ色を変えたいといった場合に使用する

sample.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn {
            width: 100px;
            background: aqua;
            text-align: center;
            cursor: pointer;
        }

        .btn:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <button class="btn">ボタン</button>
</body>
</html>