還暦過ぎたエンジニアの挑戦

いくつになっても好奇心だけは忘れないエンジニア Hikaruのブログ

MENU

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のために書いたものが全部一つずつずれちゃうのって、やっちゃってから結構がっかりします。

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

そういえば


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オリジンと呼びます