いろいろなCSSの記述方法（メモ）

HTML5+CSS3で新サイトを構築していたら、CSSの特にセレクタ周りでいろいろとできるな～と思ったので忘れないうちにメモしておきます。ちなみにCSS3からのセレクタもありますが、CSS2.1でもセレクタはたくさんありました。それらも含めて使ったものの紹介なので、CSS3に特化したものではないことにご注意ください。

まずはよくある「最初だけ」とか「最後だけ」とか「偶数・奇数」などなど。

htmlコード

<section id="contents">

  <h1>title</h1>

  <article>
    <h2>sub_title1</h2>
    <p>contents1</p>
  </article>

  <article>
    <h2>sub_title2</h2>
    <p>contents2</p>
  </article>

  <article>
    <h2>sub_title3</h2>
    <p>contents3</p>
  </article>

  <article>
    <h2>sub_title4</h2>
    <p>contents4</p>
  </article>

</section>

例えばこのようなソースがあったとします。この時以下のことをやるには…

１．最初のコンテンツだけ枠をつけたい
CSSコード

#contents article:first-child {
  border:1px solid;
}

２．最後のコンテンツだけ枠をつけたい
CSSコード

#contents article:last-child {
  border:1px solid;
}

３．偶数のコンテンツだけ枠をつけたい
CSSコード

#contents article:nth-child(even) {
  border:1px solid;
}

４．奇数のコンテンツだけ枠をつけたい
CSSコード

#contents article:nth-child(odd) {
  border:1px solid;
}

まあ、このあたりはgoogle先生でCSSセレクタで探すと普通に書いてありますね。
さらに…

５．最初のコンテンツ以外に枠をつけたい
CSSコード

#contents article:not(:first-child) {
  border:1px solid;
}

上記５の書き方で他に、
・特定のclassが描かれているコンテンツを省く
CSSコード

#contents article:not([class="hoge"]) {
  border:1px solid;
}

などもできますね！

これらは組み合わせることもできるので、例えば
CSSコード

section:not(:last-child) article:ntn-child(odd) {
  border:1px solid;
}

とかすると、最後のセクション以外の奇数のアーティクルに枠をつけるなんてこともできますね。

もっと変態な書きかたをすれば…

#contents article:not(:first-child):not(:last-child) {
  border:1px solid;
}

なんて書けば最初と最後のアーティクル以外に枠をつけます。

いやぁ、深いですねぇ。