忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(17) 疑似クラス

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

序章(17) 疑似クラス

疑似クラス
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の偶数行だけ灰色にするとかもできる
PR

コメント

ただいまコメントを受けつけておりません。