疑似クラス
a:hoverなどをそう呼ぶ。
スマホの人も多いのでhoverの意味はあまりなくなりつつあるけど一応ということで。
クラス名をつけている訳でないのと、
疑似的にそういう名前をふったような挙動をするからそう呼ぶらしい。
ちなみに、こういう記述はできない↓
ul+li+li {
color:#00f;
}
なぜならulとliは「隣接」でなく「親子」であるので。
こういう記述はできる↓ ulのあとが半角スペースが正解になる。
ul li+li a{
color:#00f;
}
リストの前に付く中黒「・」の色は<li>が持っている。
<li>の中に<a>があったらliの色をかえても色が変わるのは・だけ。
<a>の色を変えたかったらaを指定する必要がある。
<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の偶数行だけ灰色にするとかもできるらしい。
