それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。
") }) jQuery.noConflict()(document).ready(function(){ /**ページャーが気に入らないので修正**/ //やるべきこと // pre・next のいれかえ jQuery('span.pager-next').insertAfter('span.pager-prev') // pre/next に矢印を入れる jQuery('a[rel=next]').text(jQuery('a[rel=next]').text()+"> ") jQuery('a[rel=prev]').text("< "+jQuery('a[rel=prev]').text()) // pre/next をヘッダにもってくる //jQuery(".date.first").css("display","inline-block") jQuery('div.permalink.pager').clone().insertAfter(".date.first") jQuery("header .pager a").css("padding","0px 15px"); //pre/next をAjaxで取得してタイトルを取る。 //取得したタイトルをpre/next のタイトルに jQuery('span.pager-next,span.pager-prev').css("display","inline-block") jQuery('span.pager-next,span.pager-prev').css("width","250px"); jQuery('span.pager-next,span.pager-prev').css("overflow", "hidden"); jQuery('span.pager-next,span.pager-prev').css("white-space", "nowrap"); jQuery('span.pager-next,span.pager-prev').css("text-overflow", "ellipsis"); jQuery("a[rel=next],a[rel=prev]").each(function(idx,e){ var anchor = e jQuery.get(anchor.href,null,function(html){ jQuery(anchor).text() var title = jQuery("
").html(html).find(".entry-title").text().trim() jQuery(anchor).attr("title", title); text = jQuery(anchor).text() text = text.slice(0,10); text = text.replace(/の記事/, "の記事 ["+title+"] "); jQuery(anchor).text(text) }) }); }); })
トップ > cssで先頭から３つをnth-childで取得する：nth-childまとめ

cssで先頭から３つをnth-childで取得する：nth-childまとめ

テーブルのtd の先頭から３つを取得するCSS3 nth-childセレクタを作れたら嬉しいデスって話で盛り上がった。

td の先頭から３つに要素を適用したい

<table>
<tr>
 <td>1番目 <! -- ⇐背景色指定したい -->
 <td>2番目 <! -- ⇐背景色指定したい -->
 <td>3番目 <! -- ⇐背景色指定したい -->
 <td>4番目
 <td>5番目
</tr>
</table>
直ぐ思い浮かぶ回答
td:nth-child(1),td:nth-child(2),td:nth-child(3){
  background-color: red;
}

要素セレクタを並べて掛けば良い？？なんならjQueryでaddClassする？


妥協・・・・したくない！

負けた気がするよね？

なんか負けた気がする、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 ) はもっと活用していこうと思いました。

追記

先頭の２つ以外を選択するCSSセレクタ

セレクトできたらその逆を多分必要になります。

$("td:nth-child(n+2)")

または not をつかう

$("td:not(:nth-child(-n+2))")

参考資料

http://www.w3.org/TR/css3-selectors/
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child