CSSのあんまりしらないかもしれないセレクタ

この記事は田胡・柴田研究室アドベントカレンダー21日目の記事です．

3回目のFuyaです．まだ21日です...落とさなくて良かったです

今日は，CSSのセレクタ周りのお話で，ちょっと地味かもしれません．

このネタにしようと思ったきっかけは，nth-child(n)などについて最近質問をされたからです．知っておくと使う場面が来るかもしれません．

属性のマッチ

input[type=text] のような書き方は有名ですよね？先頭のマッチ，末尾のマッチ，部分マッチなどの書き方もできるんです．

先頭にマッチするものの例です．

a[href^="/"]{
    color: green;
}

a[href^="http:"]{
    color: red;
}

<a href="http://www.blogger.com/path/hoge">LINK</a>
<a href="http://example.com/">HTTP</a>
<a href="https://example.com/">HTTPS</a>

察しの良い方はお分かりだと思いますが，$=, *= で末尾，部分ができます．

後方から数える

nth-child(n), nth-of-type(n) はとても有名だと思います．
後ろから数えるnth-last-child(n);は知ってますか？使い所があまりないかもしれないですがあります．(末尾は last-childやlast-of-typeがあります)

span:nth-last-child(even){
    font-weight: bold;
}

span:nth-last-of-type(3n+1){
    color: red;
}

    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <p>A</p>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>

知ってましたか？CSS3のセレクタには，まだまだ知らないものがたくさんあります．notなどはとても便利なので調べてみましょう！

CSS4(Selectors Level 4)も楽しみですね！研究室で勉強会したいな〜と思いました．