<div id="d1">
  <a href="#">link</a><br>
</div>

<div id="d2">
  <a href="#">visited</a><br>
</div>

<a href="#">hover(ハイパーリンクにカーソルをのせる)</a><br>

<a href="#">active(ハイパーリンクをクリック)</a><br>

<input value="focus(枠内を選択)">

<div lang="ja">
  <p>lang(language-code)<br>
    この箇所のみ言語設定を日本語(ja)に設定</p>
</div>

<ol>
  <li>first-child</li>
  <li>first-child</li>
  <li>first-child</li>
</ol>

*{
  font-size:10px;
}

#d1 a:link{
  background-color:gray;
}
#d2 a:visited{
  background-color:black;
}
a:hover{
  font-size:20px;
}
a:active{
  background-color:pink;
}
input:focus{
  color:red;
}
p:lang(ja){
  color:green;
}
li:first-child{
  background-color:yellow;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.