疑似クラス《前からn番目、一定間隔おきに指定》-CSS-nth-child疑似クラスは「n番目または一定間隔おきの要素にスタイルを適用」する場合に使用します。チャイルド:nth-child()前から任意の位置、間隔おきの要素を指定するnth-childを使うと前から任意の位置または一定間隔の要素を指定することができます。1行おきに背景色を変えたい場合など、対象要素に毎回クラス名を記述する必要がなくなりソースがスッキリします。値(an+b)は親要素からみて適用したい子要素が何番目にあたるのかを指定します。値には数字以外にも指定することができます。(下記表)数値(2)2番目の子要素がE要素の場合適用。数値(2n)2の倍数(偶数)の子要素がE要素の場合適用。2以外にも3・・・などを指定した場合は「3の倍数」となります。2n(偶数)を指定する場合は「even」でも可能です。数値(2n+1)2の倍数(偶数)に1を足した(奇数)子要素がE要素の場合適用。2n+1(奇数)を指定する場合は「odd」でも可能です。数値(n+5)5番目以降の子要素がE要素の場合適用。数値(-n+5)5番目以前の子要素がE要素の場合適用。数値(5n+1)5の倍数に1を足した子要素がE要素の場合適用。even偶数の子要素がE要素の場合適用。odd奇数の子要素がE要素の場合適用。各値別サンプルも用意しましたので、値指定の参考にしてください。【値別サンプル】nth-childは子要素内に指定した要素以外もカウントしてしまいますが、指定した要素のみをカウントさせたい場合はnth-of-typeを使用します。nth-childは前から何番目ですが、後ろから指定したい場合はnth-last-childを使用します。適用する要素は勘違いしやすい慣れていないうちは思った通りに適用されない場合があります。基本的にはnth-childの解釈の勘違いが多いです。<li>に適用させる。値:2n(偶数)の子要素に適用させる。HTMLソースでは、<li>の親要素は<ul>なので<ul>内の子要素が適用される範囲となります。<ul>が対象の親要素で、その子要素でかつ偶数のli要素がCSSの適用対象となります。li要素が対象なので、同じ親要素内の4番目(偶数)にある<p>タグは除外されます。」の説明で指定順を分かりやすくするため<p>タグを<li>に内包していません。リストの入れ子の場合、<p>タグなどは<li>に内包しなければ、ルール違反となりますので注意してください。正しい記述になります。#FF7BAC;}「サンプルpタブ親」「サンプルリスト親6、サンプルリスト子61」のカラーが変更されていないのは、「liから見た親要素内の子要素を前から数えて偶数に適用する」ため奇数のリスト、リスト以外の要素には適用されません。子要素のn番目のカウントには含まれますので「サンプルpタブ親」がカウントされ、後の「サンプルリスト親3」(リスト要素としては3番目)にCSSが適用されます。値別サンプル値別サンプルのHTMLは<ul>に<li>のリスト項目を1~15までのソースで統一しています。nth-child(2)2番目の子要素がE要素の場合適用。#FF7BAC;}nth-child(2n)2の倍数の子要素がE要素の場合適用。2以外にも3・・・などを指定した場合は「3の倍数」となります。2n(偶数)を指定する場合は「even」でも可能です。)内のように偶数が指定される。nth-child(2n+1)2の倍数に1を足したの子要素がE要素の場合適用。2n+1(奇数)を指定する場合は「odd」でも可能です。)内のように奇数が指定される。nth-child(n+5)5番目以降の子要素がE要素の場合適用。#FF7BAC;}n=0の場合:0+5=5(5番目に適用)n=1の場合:1+5=6(6番目に適用)n=2の場合:2+5=7(7番目に適用)・・・・・nが増加するごとに数値が増加する。nth-child(-n+5)5番目以前の子要素がE要素の場合適用。#FF7BAC;}n=0の場合:-0+5=5(5番目に適用)n=1の場合:-1+5=4(4番目に適用)n=2の場合:-2+5=3(3番目に適用)・・・・・nが増加するごとに数値が減少する。nth-child(5n+1)5の倍数に1を足した子要素がE要素の場合適用。#FF7BAC;}n=0の場合:5×0+1=5(1番目に適用)n=1の場合:5×1+1=6(6番目に適用)n=2の場合:5×2+1=11(11番目に適用)・・・・・nth-child(even)偶数の子要素がE要素の場合適用。偶数を指定する場合は「2n」でも可能です。#FF7BAC;}n=0の場合:2×0=0(0番目は存在しない)n=1の場合:2×1=2(偶数なので適用)n=2の場合:2×2=4(偶数なので適用)・・・・・nth-child(odd)奇数の子要素がE要素の場合適用。奇数を指定する場合は「2n+1」でも可能です。