WEB制作

2015-10-31(Sat)

Atsuko

便利な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の倍数番目などいろいろと応用できるようですので、興味があればお試しください。
ではまた、(^-^)ノシ


このブログを書いた人

Atsuko

実はJavascriptとか会社入るまでやったことなかったことは内緒です。
酉年生まれのせいか、話を聞いても三歩あるけば忘れます。

最近書いた記事

関連する記事