MDNのドキュメントでCSSを学ぶ(その1)

概要

MDNのCSSドキュメントはアルファベット順に並んでいる索引があるので、そのうちの一部を書いてみる。

書いてみる

:active

ユーザによってアクティブ化されている要素を示す。

アクティブ化

公式より

「アクティブ化」とはふつう、マウスを使用する場合は第1ボタンを押し下げたときに始まり、離したときに終わります。

サンプル

<a href="http://wawawa12345.hatenablog.com/#edit">リンク</a>
a:active{
  color: #ff0000;
}

::after

疑似要素を作成して、要素に装飾的な内容を追加する。

サンプル

<p class="even_number">1</p>
<p class="odd_number">2</p>
.even_number::after{
  content: "←奇数";
  color: #ff0000;
}

.odd_number::after{
  content:"←偶数";
  color:#00ffff;
}