擬似クラス(書いて理解する) #CSS

【擬似クラス】

要素の特定の状態に対して適用するセレクタ。
例) フォーカス, ホバー, etc...
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>擬似クラス</title>
    <style>
        /* リンク関連 */
        a {
            display: block;
        }

        .link:link { /* 未訪問のリンク */
            color: chartreuse;
        }

        .visited:visited { /* 訪問済みのリンク */
            color: chartreuse;
        }

        .active:active { /* アクティブ状態(要素をクリックして離すまで)の要素 */
            color: chartreuse;
        }

        .hover:hover { /* ホバー状態(カーソルを要素上に乗せている状態)の要素 */
            color: chartreuse;
        }


        /* xxx-of-type */
        .xxx-of-type > p:first-of-type { /* 指定した要素の最初 */
            color: darkred;
        }

        .xxx-of-type > p:last-of-type { /* 指定した要素の最後 */
            color: darkred;
        }

        .xxx-of-type > p:nth-of-type(2) { /* 指定した要素のN番目 */
            font-weight: bold;
        }

        .xxx-of-type > span:only-of-type { /* 指定した要素が一つだけ */
            font-size: 5px;
        }

        ul > li:nth-of-type(2n+1) { /* 奇数の要素 */
            background-color: aqua;
        }


        /* xxx-child */
        /* xxx-childは、指定した要素以外も数える。*/
        .xxx-child > p:first-child { /* 指定した要素の最初(他の要素を含めて最初) */
            color: darkred;
        }

        .xxx-child > p:last-child { /* 指定した要素の最初(他の要素を含めて最後) */
            color: darkred;
        }

        .xxx-child > span:nth-child(2) { /* 指定した要素のN番目(他の要素を含めた数) */
            font-weight: bold;
        }

        .xxx-child > p:only-child { /* 指定した要素が一つだけ(他の兄弟要素なし) */
            font-size: 5px;
        }


        /* other */
        .checked > input:checked + label::before { /* チェックボックス or ラジオボタンが選択されている状態 */
            content: "checked";
        }

        .focus:focus { /* 要素がフォーカスされている状態 */
            background-color: red;
        }

        .enabled-disabled > button:enabled { /* 要素が有効な状態 */
            background-color: greenyellow;
        }

        .enabled-disabled > button:disabled { /* 要素が無効な状態 */
            background-color: palevioletred;
        }

        .empty:empty::before { /* 内容が空の要素 */
            content: "empty";
        }

        .lang > blockquote:lang(ja) { /* 言語コードが設定されている要素 */
            color: darkred;
        }

        :root { /* ルート要素であるhtml要素 */
            width: 80%;
            margin: 0 auto;
        }

        #title:target { /* アンカーリンクのターゲットとなる要素 */
            color: deepskyblue;
        }

        .not > li:not(:last-of-type) { /* 指定したセレクタに該当しない要素 */
            background-color: lavender;
        }

    </style>
</head>
<body>


<h1 id="title">擬似クラス(pseudo classes)</h1>

<h3>links</h3>
<a href="https://google.com" class="link">未訪問のリンク</a>
<a href="https://google.com" class="visited">訪問済みのリンク</a>
<a href="" class="active">アクティブ状態(要素をクリックして離すまで)のリンク</a>
<a href="" class="hover">ホバー状態(カーソルを要素上に乗せている状態)のリンク</a>

<br>
<hr>

<h3>xxx-of-type</h3>
<div class="xxx-of-type">
    <p>指定した要素の最初</p>
    <p>指定した要素の2番目</p>
    <p>指定した要素の最後</p>
    <span>指定した要素が一つだけ(下にspan要素を追加すると適用されなくなる)</span>
</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<br>
<hr>

<h3>xxx-child</h3>
<div class="xxx-child">
    <p>指定した要素の最初</p>
    <span>指定した要素の2番目</span>
    <p>指定した要素の最後</p>
    <p>指定した要素の最後</p>
</div>
<div class="xxx-child">
    <p>指定した要素が一つだけ</p>
</div>

<br>
<hr>

<h3>checked</h3>
<div class="checked">
    <input type="checkbox" name="checkbox1"><label></label>
    <input type="checkbox" name="checkbox2" checked><label></label>
    <input type="checkbox" name="checkbox3"><label></label>
    <br>
    <input type="radio" name="radio" checked><label></label>
    <input type="radio" name="radio"><label></label>
</div>

<br>
<hr>

<h3>focus</h3>
<input class="focus" type="text">

<br>
<hr>

<h3>enable・disable</h3>
<div class="enabled-disabled">
    <button>enabled</button>
    <button disabled>disabled</button>
</div>

<br>
<hr>

<h3>empty</h3>
<div class="empty"></div>

<br>
<hr>

<h3>lang</h3>
<div class="lang">
    <blockquote lang="ja">
        <p>jaが指定されている要素</p>
    </blockquote>
    <blockquote lang="en">
        <p>enが指定されている要素</p>
    </blockquote>
</div>

<br>
<hr>

<h3>target</h3>
<a class="target" href="#title">クリックするとタイトルの文字色が変化するよ!</a>

<br>
<hr>

<h3>not</h3>
<ol class="not">
    <li>最初</li>
    <li>~</li>
    <li>最後</li>
</ol>

</body>
擬似クラス(書いて理解する)

【擬似クラス】

[プレビュー]
