要素セレクタで条件下の要素のスタイルを変える方法

CSS

セレクタを上手く使えば、HTML側に手を入れなくても色々なスタイルを適用させることができます。

素:要素セレクタ;
要素セレクタ説明
nth-child(条件)条件にマッチした要素(前から)
nth-last-child(条件)条件にマッチした要素を(後から)
nth-of-type(条件)同一要素(前から)
nth-last-of-type(条件)同一要素(後から)
first-child最初の要素
last-child最後の要素

以下のリスト要素のスタイルを要素セレクタを使って色々変えてみましょう。

lt;ul>
  <li>1行目</li>
  <li>2行目</li>
  <li>3行目</li>
  <li>4行目</li>
  <li>5行目</li>
</ul>

先頭/末尾のスタイルを変える

first-child/last-childプロパティを使います。これによって先頭/末尾の要素にだけスタイルを適用させることができます。

l{list-style:none;}

ul li:first-child{
  background-color:blue;
  color:white;
}

ul li:last-child{
  background-color:white;
  color:red;
}

実行結果

style-change-selector01

行数でスタイルを変える

奇数行と偶数行でスタイルを変える

先頭から条件を指定できるnth-childプロパティを使います。 奇数行はodd、偶数行はevenでスタイルを指定しましょう。 テーブルやリストの視認性を上げる事ができるかもしれません。

ちなみにnth-last-childを使えば末尾から条件を指定できます。

l{list-style:none;}

ul li:nth-child(odd){
  background-color:blue;
  color:white;
}

ul li:nth-child(even){
  background-color:white;
  color:red;
}

実行結果

style-change-selector02

oddは「2n+1」、evenは「2n」でも同じ結果となります。

3の倍数行でスタイルを変える

nth-childプロパティの条件を「3n」で指定してやれば、3の倍数行だけスタイルを変えることができます。組み合わせで色々応用が利きますね。

l{list-style:none;}

ul li:nth-child(3n){
  background-color:blue;
  color:white;
}

実行結果

style-change-selector03

奇数・偶数行と先頭行に別スタイルを与える

基本的に奇数行と偶数行でスタイルを分けつつ、一行目には別のスタイルを適用させてみましょう。 スタイル競合時のルールを理解していれば簡単ですね。 後勝ちなので一行目のスタイル指定を後ろに書きます。

l{list-style:none;}

ul li:nth-child(odd){
  background-color:blue;
  color:white;
}

ul li:nth-child(even){
  background-color:white;
  color:red;
}

ul li:first-child{
  background-color:black;
  color:white;
}

実行結果

style-change-selector04

このように単純なHTMLに対してでもCSSで様々な装飾を施すことができます。 変にdivやclassを追加するよりはスマートなので、色々工夫してみましょう。

eyecatch

idとclassの使い分け

eyecatch

ボックスモデルとマージン・パディング

CSSの記事

eyecatch

idとclassの使い分け

eyecatch

CSSのスタイルの優先順位

eyecatch

ボックスモデルとマージン・パディング

eyecatch

CSSとは

eyecatch

ドロップシャドウでテキストやボックスに影を付ける

eyecatch

ブロックレベル要素とインライン要素

CSSの記事一覧HOME