テーブルのtd の先頭から３つを取得するCSS3 nth-childセレクタを作れたら嬉しいデスって話で盛り上がった。
td の先頭から３つに要素を適用したい
<table> <tr> <td>1番目 <! -- ⇐背景色指定したい --> <td>2番目 <! -- ⇐背景色指定したい --> <td>3番目 <! -- ⇐背景色指定したい --> <td>4番目 <td>5番目 </tr> </table>
負けた気がするよね？
なんか負けた気がする、nth-child理解できてないんじゃね？
調べましょう
MDNとW3Cを読んでみた
みつけた！！！！！！！
span:nth-child(-n+3)
親要素の先頭から 3 つ目までの子要素のうちの 1 つ で、span であるものがマッチします。
:nth-child - CSS | MDN
nth-childってどうなってるの？考えてみた
普段何気なく使ってるnth-child。これって一体どういうこと？ちょっと考えてみた
要素が５個のTDがあると仮定します
次のようなHTMLがあるときnth-childはどういう動作をするのか
<table> <tr> <td>1番目 <td>2番目 <td>3番目 <td>4番目 <td>5番目 </tr> </table>
td:nth-child(2n+1) の場合
td:nth-child(2n+1)
の場合
n : 2n+1 = x # nth-child(x) n=0: 2*0+1= 1 # nth-child(1) 要素あり n=1: 2*1+1= 3 # nth-child(3) 要素あり n=2: 2*2+1= 5 # nth-child(5) 要素あり n=3: 2*3+1= 7 # nth-child(7) 要素なし n=4: 2*4+1= 9 # nth-child(9) 要素なし
td:nth-child(2n-1) の場合
td:nth-child(2n-1)
の場合。要素数は５
n : 2n-1 = x # nth-child(x) n=0: 2*0-1= -1 # nth-child(-1) 要素なし n=1: 2*1-1= 1 # nth-child( 1) 要素あり n=2: 2*2-1= 3 # nth-child( 3) 要素あり n=3: 2*3-1= 5 # nth-child( 5) 要素あり n=4: 2*4-1= 7 # nth-child( 7) 要素なし
td:nth-child(-n+3) の場合
td:nth-child(-n+3)
の場合。要素数は５
n : -n+4 = x # nth-child(x) n=0: -1 * 0+4 = 3 # nth-child(3) 要素あり n=1: -1 * 1+4 = 2 # nth-child(2) 要素あり n=2: -1 * 2+4 = 1 # nth-child(1) 要素あり n=3: -1 * 3+4 = 0 # nth-child(0) 要素なし n=4: -1 * 4+4 = -1 # nth-child(-1) 要素なし
td:nth-child(-n+4) の場合
td:nth-child(-n+4)
の場合。要素数は５
n : -n+4 = x # nth-child(x) n=0: -1 * 0+4 = 4 # nth-child(4) 要素あり n=1: -1 * 1+4 = 3 # nth-child(3) 要素あり n=2: -1 * 2+4 = 2 # nth-child(2) 要素あり n=3: -1 * 3+4 = 1 # nth-child(1) 要素あり n=4: -1 * 4+4 = 0 # nth-child(0) 要素なし
結論： -n + 3 で先頭から３つを取得
nth-childの数値評価を考えれば、先頭からｋ個の取得は、意外とシンプルに理解できた
td:nth-child(-n+3)
先頭から３つの要素を選ぶCSSがかけます
nth-child( an + b ) はもっと活用していこうと思いました。
