スタートページ＞ Javascript＞ tips

ＣＳＳ リスト要素の〇番目の色

style
　#ol1 li:first-child      { background: silver; }    /* 最初の要素だけ　　最後ならば :last-child */
　#ol2 li:nth-child(odd)   { background: silver; }    /* 奇数の要素だけ　　偶数ならば :(even) */
　#ol3 li:nth-child(2)     { background: silver; }    /* ２番目の要素だけ　複数指定は不可　 */
　#ol4 li:nth-child(3n-1)  { background: silver; }    /* (3n-1)番目の要素　3*n-1 ではない　 */

　#tbl1 tr:first-child     { background: silver; }    /* tr指定 */
　#tbl2 tr:nth-child(2n+1) { background: silver; }
　#tbl3 td:nth-child(1)    { background: silver; }    /* td指定 */

　#div1 p:nth-child(odd)   { background: silver; }

liやdtなど

　#ol1 first-child
  1. １行目
  2. ２行目
  3. ３行目
  4. ４行目
  5. ５行目
 　#ol2 nth-child(odd)
  1. １行目
  2. ２行目
  3. ３行目
  4. ４行目
  5. ５行目
 　#ol3 nth-child(2)
  1. １行目
  2. ２行目
  3. ３行目
  4. ４行目
  5. ５行目
 　#ol4 nth-child(3n-1)
  1. １行目
  2. ２行目
  3. ３行目
  4. ４行目
  5. ５行目

tr,tdなど

#tbl1 tr:first-child　　
tr=1.td=1tr=1.td=2
tr=2.td=1tr=2.td=2
tr=3.td=1tr=3.td=2
tr=4.td=1tr=4.td=2
tr=5.td=1tr=5.td=2
 #tbl2 tr:nth-child(2n+1)　
tr=1.td=1tr=1.td=2
tr=2.td=1tr=2.td=2
tr=3.td=1tr=3.td=2
tr=4.td=1tr=4.td=2
tr=5.td=1tr=5.td=2
 #tbl3 td:nth-child(1)　
tr=1.td=1tr=1.td=2
tr=2.td=1tr=2.td=2
tr=3.td=1tr=3.td=2
tr=4.td=1tr=4.td=2
tr=5.td=1tr=5.td=2

次のような要素にも使えます

#div1 p:nth-child(odd)

１行目

２行目

３行目

４行目

５行目