擬似クラスってなに？

2015年10月11日

簡単に言うと、状況に合わせてスタイルを変える
クラスのことです。

CSSで要素をしてい、何かしらのスタイルを適用して
きました。今回亜、「状況」に応じて
スタイルを適用するために擬似クラスを取り上げます。

擬似クラスで頻繁に使うのはおそらくリンク関連の
ものです。ユーザーのマウスを動かした時や
クリックしたときにリンクの色を変えるとか

訪問済みのリンクの色は紫になるとかです。
その状況に応じて、適用するスタイルを切り替えるのが
擬似クラスです。

種類は下記の通りです。表以外にもまだあるかも・・・

書き方	説明
要素名:link	訪問したことがないページへのリンク
要素名:visited	訪問したことがあるページへのリンク
要素名:hover	カーソルが乗っている要素
要素名:active	クリックしている要素
要素名:first-child	ある要素内の最初の子要素
要素名:last-child	ある要素内の最後の子要素
要素名:focus	フォームなどでフォーカスされているとき
要素名:lang()	指定した要素がlang属性で設定されている要素
要素名:checked	チェックボタンやラジオボタンで、チェックされている要素
要素名:target	ジャンプ先の要素

    *{margin:0;padding:0;}
    
    #container{
        width:640px;    
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }
    .box{
        margin:24px;
        width:180px;
        height:120px;
        border:1px solid #000000;
    }
    .box a:link{
        background-color:aquamarine;
    }
    .box a:visited{
        background-color:yellow;
    }
    .box a:hover{
        background-color:skyblue;
    }

    #pTagTest p:first-child{
        margin-left:80px;
        color:red;
    }
    #pTagTest p:last-child{
        color:blue;
    }

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

.box{

margin:24px;

width:180px;

height:120px;

border:1px solid #000000;

}

.box a:link{

background-color:aquamarine;

}

.box a:visited{

background-color:yellow;

}

.box a:hover{

background-color:skyblue;

}

#pTagTest p:first-child{

margin-left:80px;

color:red;

}

#pTagTest p:last-child{

color:blue;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="box">
        <a href="">未訪問のリンク</a>
    </div>

    <div id="pTagTest">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

<a href="">未訪問のリンク</a>

</div>

</div>

</body>

</html>