CSSの擬似クラスを使ってn番目の要素だけにStyleを適用したい件

いきなりですが擬似クラスを使うと可能！ｗ

擬似クラスとは親の要素から見た子要素に対して色々な条件でスタイルを適用する方法です。

例えばこんなソースがあったとします。

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
… 

この様な場合で、例えば一番最初の
<li>～</li>

だけに、何らかのスタイルを指定したり、3番目の
<li>～<li>

だけに指定…といった定義が可能になります。

その他、偶数や奇数のみ、一番最初、一番最後といった指定も出来ます。

ちなみに私がよく使うのはこれ！ｗ

li:nth-child(3){
 color:red;
}

これは、要素の上からn番目への指定をしています。

要素名:nth-child(n) {プロパティ名:値;}　てな感じで！ｗ（ここのnは、n番目という事よ）

この場合だと、上から3番目の
<li>だけに対しての指定となり、三番目だけが赤文字になるといった感じです。

以下の場合だと、最初の
<li>に対しての指定！

li:first-child{
 color:red;
}

こちらは最後の
<li>に対しての指定。

li:last-child{
 color:red;
}

奇数全てに適用…。

li:nth-child(odd){
 color:red;
}

偶数全てに適用…。

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

といった感じです。

このほかにも色々あるので、詳しく知りたい方は「擬似クラス」を調べてみてください。

擬似クラス知ると、非常に便利な使い方が多々できるので覚えておいて損は無しだと思います。

よく分からない方は、一冊でもよいので何かしらのリファレンスを手元に置かれると良いかもです。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。 監修：こもり まさあき