Nのために

中学生に人気の運動部TOP3はこんな感じらしいです。

こんにちは、Hikaruです。

中学生に人気の運動部ランキングTOP3

人気順	運動部
1	ソフトテニス部
2	バスケットボール部
3	卓球部

バスケットボール部は2位なんですね。
Hikaruも娘ともどもバスケットは大好きです。

でも、一番じゃないんですね。
　
　
そこで、突然ですが、こんなwebページの表があった時に、
バスケットボール部の

2行目だけ赤字で強調したい！

と思った時にどうしましょう🙄

ちょっと今日はエンジニア初心者向けみたいな記事になりますが。。。

<table>
  <thead>
    <tr>
      <th>人気順</th>
      <th>運動部</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ソフトテニス部</td>
    </tr>
    <tr>
      <td>2</td>
      <td>バスケットボール部</td>
    </tr>
    <tr>
      <td>3</td>
      <td>卓球部</td>
    </tr>
  </tbody>
</table>

普通は2行目のタグにクラスをつけて、
そのクラスに赤字スタイルを定義すればよいのですが、
ここではクラス名をつけるなどのHTMLは修正したくないとします。
（やや強引な展開）

　
そんなときの考え方は
表の見出し(thead)が1行で、内容（tbody）の3行のうち、
2行目の文字を太字で赤くしたい
ということですので、こんな風に書きます。

スタイルシートを使うなら

table tbody tr:nth-child(2) {color:red;}

Jqueryを使うなら

$('table tbody tr').eq(1).css('color', 'red');

どちらの書き方でも表示はこうなります。

人気順	運動部
1	ソフトテニス部
2	バスケットボール部
3	卓球部

スタイルシートも、Jqueryも、どちらも意味は同じで
tableの中の
tbodyの中の
trのn番目のcolor（文字の色）はred（赤）
という意味ですが、このn番目のnは順番を表す数字です。

Jqueryは0オリジン*1なので、0番目、1番目と数えて2行目なら1。
cssは1オリジンなので、1番目、2番目と数えるて2行目なら2です。

エンジニアとしては0オリジンに慣れ親しんでいるので、
Jquryで間違うことはありませんが、
たまにcssを書くときにはうっかり、
n番目のnのために失敗したりします。

ｎのために書いたものが全部一つずつずれちゃうのって、やっちゃってから結構がっかりします。

ま、「そんな失敗はしないよ」という声が聞こえてくるような気もしますが、😓

そういえば

というドラマがありましたね。

相変わらず強引な話題転換です。

あのドラマがきっかけで、賀来賢人さんと榮倉奈々さんは結婚したのでした。
みなさんうまいことやっていますね。 😏

というわけで今日はこれ。
家入レオさんの「Nのために」の主題歌

家入レオ -「Silly」（Full Ver.）

今日のまとめ

cssで疑似クラスを使ったセレクタで

n番目は :nth-child(n) を使うが、n は1オリジンで 1から数える

Jqueryのセレクタで

n番目は .eq(n) と書くが、n は0オリジンで 0から数える

Hikaru

*1:0から数え始めること。0を起点にすること。対して一般生活では1から数え始めるので1オリジンと呼びます