【css】擬似要素 擬似クラス つかってみたら
擬似要素(クラス)
結構避けてきてた部分ではあったけど、調べてみると
使わずにはいれないなーと。
まずは、デモ
HTML
<ul>
<li>Home</li>
<li>About</li>
<li>Music</li>
</ul>
CSS
li {
list-style: none;
display: inline;
}
li + li:before {
content: " →";
}
そうすると、
Home→About→Music こんなのができたよ。
擬似要素(クラス)自体はたくさんある。
before afterの他にも。hoverとかvisitedとかは使うよね、普通に。
contentsプロパティの書き方が肝になるような。
文字列の場合は””を付けてあげる。あと、url()とか、attr()とか使えるから。便利。
後、よく使いそうなのは何なんだろう。
- :enabled ある要素が有効な時(フォームとか)
- :disabled ある要素が無効な時(フォームとか) これは便利そう。 JSとcssでのできることってのを考えて実装だーね。
参考にさせてもらったサイト
coliss