疑似クラス
a:hoverなどをそう呼ぶ
スマホの人も多いのでhoverの意味はあまりなくなりつつあるけど
一応ということで
クラス名をつけている訳でないのと、
疑似的にそういう名前を振ったような挙動をするからそう呼ぶらしい
ちなみに、こういう記述はできない
ul+li+li {
color:#00f;
}
なぜならulとliは「隣接」でなく「親子」なので
こういう記述はできる
ulのあとが半角スペースが正解になる
ul li+li a{
color:#00f;
}
リストの前に付く中黒「・」の色は<li>が持っている
<li>の中に<a>があったらliの色をかえても色が変わるのは・だけ
<a>の色を変えたかったらaを指定する必要がある
課題:
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
とあってaboutの色だけ変えたかったら?
↓
やり方その1
classを振る
やり方その2
aboutとcontactの色を変えてcontactを戻す
ul li+li a{
color:#00f;
}
ul li+li+li a{
color:#f00;
}
この方法は面倒だしあまりよろしくない
やり方その3.特別な記述をする
li:first-child a{
color:#666;
}
こう書くと「兄弟の一番上の」li項目のaが色が変わる
こういう疑似クラスの書き方がある
first-child:長男
last-child:末っ子
nth-chlild(2):2番目の兄弟
nth-chlild(2n-1):nというのはどんな数字にも変化する→偶数行だけ色を付ける
nth-chlild(2n+1):
このnをつかえばtableの偶数行だけ灰色にするとかもできる