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

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

��素：要素セレクタ;

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

lt;ul>
  <li>１行目</li>
  <li>２行目</li>
  <li>３行目</li>
  <li>４行目</li>
  <li>５行目</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;
}

実行結果

行数でスタイルを変える

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

先頭から条件を指定できる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;
}

実行結果

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

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

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

l{list-style:none;}

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

実行結果

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

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

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;
}

実行結果

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