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


5 件のコメント:

  1. Great post I would like to thank you for the efforts you have made in writing this interesting and knowledgeable article
    subway surfers

    返信削除
  2. I am really happy to know this useful website. It gives me a lot of interesting knowledge about everything around especially the content of the above article.
    shell shockers

    返信削除

  3. I read a lot of Types of Informal report Definition service blogs because I'm interested in learning more about education. By doing so, I learn a lot of information that is useful for my studies. If you decide to read it, I think you'll find the articles interesting.

    返信削除
  4. I'm overjoyed to have discovered your helpful page. It enlightens me on a wide range of intriguing topics, particularly the subject of the aforementioned article. the backrooms

    返信削除
  5. Excellent article. I'd want to thank you for your efforts in writing this intriguing and informative article. bike race

    返信削除