2013年12月21日土曜日

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)も楽しみですね!研究室で勉強会したいな〜と思いました.


0 件のコメント:

コメントを投稿