CSSセレクタでスタイル適応 「nth-child」と「nth-of-type」

CSSセレクタをうまく使ってスタイルを適応させる

n(5)番目の要素のみ、tableで奇数行のみスタイルを適応させたい時、ある要素のここだけスタイルを適応させたいときに参考になった参考サイトを紹介いたします。

CSSセレクタ-参考サイト1

実用的なCSSセレクタが20個解りやすく解説されている
cssとsample付き

weboook.blog22.fc2.com

CSSセレクタ-参考サイト2

CSS3で増えたセレクタをまとめてある

weboook.blog22.fc2.com

CSSセレクタ-参考サイト3

CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違いを意味を理解して使えるようになりたい時

  1. n(5)番目の要素にスタイルを適応させるCSSセレクタ(「nth-child」と「nth-of-type」)ややこしい「nth-child」と「nth-of-type」の両者の違いを解りやすく説明
  2. 上記以外nth-child(odd)」「nth-child(2n+1)」などの入力方法が表にしてあり便利!
  3. 具体的な使用例あり
  • 表の色付け
  • floatを3つごとにclearする
  • リストの一番上の線を消す

weboook.blog22.fc2.com