BLOG ブログ

2015.10.31

便利なCSSセレクタ

CSSを改めて勉強し直してみると、意外と知らないものが結構あったりします。
その中で、あ、便利だな!と思うものをご紹介したいと思います。

●番目の子要素にスタイル適用

E:nth-child(●)

例として

ul li:nth-child(2){
    color:red;
}
<ul>
   <li>1番目の要素</li>
   <li>2番目の要素</li>
   <li>3番目の要素</li>
   <li>4番目の要素</li>
</ul>

結果↓

  • 1番目の要素
  • 2番目の要素
  • 3番目の要素
  • 4番目の要素

偶数番目の子要素にスタイル適用

E:nth-child(even)
または
E:nth-child(2n)

例として

ul li:nth-child(even){
    color:red;
}
<ul>
   <li>1番目の要素</li>
   <li>2番目の要素</li>
   <li>3番目の要素</li>
   <li>4番目の要素</li>
</ul>

結果↓

  • 1番目の要素
  • 2番目の要素
  • 3番目の要素
  • 4番目の要素

奇数番目の子要素にスタイル適用

E:nth-child(odd)
または
E:nth-child(2n+1)

例として

ul li:nth-child(odd){
    color:red;
}
<ul>
   <li>1番目の要素</li>
   <li>2番目の要素</li>
   <li>3番目の要素</li>
   <li>4番目の要素</li>
</ul>

結果↓

  • 1番目の要素
  • 2番目の要素
  • 3番目の要素
  • 4番目の要素

その他いろいろ

/* 最初の文字にスタイル適用 */
p:first-letter{
    font-size:300%;
    font-weight:bold;
    color:red;
}

最初の文字にスタイル適用

/* 最初の行にスタイル適用 */
p:first-line{
    font-weight:bold;
    color:red;
}

最初の行にスタイル適用を適用します。最初の行にスタイル適用を適用します。最初の行にスタイル適用を適用します。最初の行にスタイル適用を適用します。最初の行にスタイル適用を適用します。最初の行にスタイル適用を適用します。最初の行にスタイル適用を適用します。

いろいろ試すと楽しいです。

他にも、3の倍数番目4の倍数番目などいろいろと応用できるようですので、興味があればお試しください。
ではまた、(^-^)ノシ

kato

このブログを書いた人

酉年生まれのせいか、話を聞いても3歩歩けば忘れます。 こんな私ですが、よろしくお願いします。

RELEVANCE 関連記事

Google Analytic

「今月のアクセス数めっちゃ増えてる!!」 アクセス数が増えると嬉

お問い合わせ TOPへ