【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