ブックマーク / weboook.blog22.fc2.com (2)

  • CSS3で追加されたセレクタ「:not()」について考えてみました

    CSS3セレクタで追加された「:not()」。今まで使ったことがないので、深く考えたこともなかったですが、曖昧なままじゃダメだと思い勉強してみました。 CSSセレクタって何だという方はこれらの記事が役に立つと思います。 意外と知らない!?CSSセレクタ20個のおさらい|Webpark 保存版!CSS3セレクタの説明書|Webpark では、「:not()」について考えてみます。これから紹介する簡単なサンプルたちはWindows7Chromeで動作確認しています。他のブラウザの場合うまく対応していない場合も考えられますのでご注意ください。 「:not()」の基 Selectors Level 3では、「E:not(s)」という風に説明されています。日語で説明すると、「sでないセレクタを持つE要素」という感じになります。 また、「Negation pseudo-class」というグループ

    CSS3で追加されたセレクタ「:not()」について考えてみました
    cocodrips
    cocodrips 2013/09/25
  • CSSセレクタ20個のおさらい

    CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

    CSSセレクタ20個のおさらい
    cocodrips
    cocodrips 2013/09/02
    普通に知らないのあった
  • 1