CSSだけで表の列を一括装飾する書き方2通り
それでは、HTMLソースを編集することなく、CSS(スタイルシート)の記述だけで表の列を一括装飾する方法を解説いたします。具体的な記述例の前に、まずは書き方の概要をざっとご紹介いたします。【このページの目次】
CSS3のnth-of-typeやnth-child疑似クラスを使って表の列を一括装飾
CSS3のnth-of-typeやnth-child疑似クラスを使うと、表の列を一括装飾するのはとても簡単です。■セルをtd要素だけで作っている場合
もし、すべてのセルをtd要素だけで作っているなら以下のように記述します。
tr td:nth-of-type(1) { ～1列目(1つ目のtd要素)の装飾～ }
tr td:nth-of-type(2) { ～2列目(2つ目のtd要素)の装飾～ }
tr td:nth-of-type(3) { ～3列目(3つ目のtd要素)の装飾～ }
tr td:nth-of-type(4) { ～4列目(4つ目のtd要素)の装飾～ }
tr td:nth-of-type(5) { ～5列目(5つ目のtd要素)の装飾～ }
上記は、表の各セルがtd要素で作られている場合の例です。 nth-of-type疑似クラスは、「n番目の要素」に限定して装飾できる疑似クラスです。tr要素で作る「1行」の中で、「1番目に登場するtd要素」とは「1列目」のことです。「2番目に登場するtd要素」とは「2列目」のことです。つまり、この方法で、列ごとに一括装飾できるわけです。■セルをth要素とtd要素の混合で作っている場合
もし、先頭をth要素にして、残りのセルをtd要素で作っているなら、以下のように記述すれば良いでしょう。
tr th:nth-of-type(1) { ～1つ目のth要素(1列目)の装飾～ }
tr td:nth-of-type(1) { ～1つ目のtd要素(2列目)の装飾～ }
tr td:nth-of-type(2) { ～2つ目のtd要素(3列目)の装飾～ }
tr td:nth-of-type(3) { ～3つ目のtd要素(4列目)の装飾～ }
tr td:nth-of-type(4) { ～4つ目のtd要素(5列目)の装飾～ }
上記のnth-of-type疑似クラスを使った記述では、数字が列番号と合致しないので若干ややこしいですね。そこが気になる場合は、以下のようにnth-child疑似クラスを使って記述しても良いでしょう。
tr th:nth-child(1) { ～1列目(1つ目の子要素がth要素だった場合)の装飾～ }
tr td:nth-child(2) { ～2列目(2つ目の子要素がtd要素だった場合)の装飾～ }
tr td:nth-child(3) { ～3列目(3つ目の子要素がtd要素だった場合)の装飾～ }
tr td:nth-child(4) { ～4列目(4つ目の子要素がtd要素だった場合)の装飾～ }
tr td:nth-child(5) { ～5列目(5つ目の子要素がtd要素だった場合)の装飾～ }
この場合は、数字が列の番号と一いたします。※先の2種類の疑似クラス「nth-of-type」と「nth-child」の違いは、以下の通りです。
- 「td:nth-of-type(3)」と記述した場合の意味
→複数のtd要素のうち、3番目に登場するtd要素 - 「td:nth-child(3)」と記述した場合の意味
→複数の子要素のうち、3番目の子要素がtd要素だった場合
子要素がすべて1種類の要素だけであれば、どちらを使っても同じ対象を指します。しかし、複数種類の子要素が混在している場合は、指し示す対象が異なります。例えば、
- span要素
- a要素
- span要素(◆)
- img要素
- span要素(★)
……という順序で合計5つの要素が並んでいるとき、
- 「span:nth-of-type(3)」は、★を指します(＝span要素の中で3番目)が、
- 「span:nth-child(3)」は、◆を指します(＝「3番目の子要素」として登場するspan要素)。
もし、3番目の子要素がspan要素ではなかった場合は、「span:nth-child(3)」の指定では何も装飾されません。
■要素名を省略して、子要素の順序だけで装飾を指定する方が楽
上記のように、td要素かth要素かの区別が面倒なら、以下のように要素名を省略してしまう方法もあります。
tr :nth-child(1) { ～1列目の装飾～ }
tr :nth-child(2) { ～2列目の装飾～ }
tr :nth-child(3) { ～3列目の装飾～ }
tr :nth-child(4) { ～4列目の装飾～ }
tr :nth-child(5) { ～5列目の装飾～ }
上記の場合は、tr要素(＝1行)に含まれる要素のうち、1つ目～5つ目の子要素(要素の種類は何でも)を対象にして装飾しています。「tr」と「:nth-child」との間には空白が必要ですので、詰めないよう注意して下さい。CSS2.1の隣接兄弟セレクタを使って、表の列を一括装飾
古いブラウザを考慮する必要があるなど、何らかの事情でCSS3が使えない場合でも、 CSS2.1の隣接兄弟セレクタを使うことで、表の列を一括装飾できます。■セルをtd要素だけで作成している場合
tr td { ～1列目(以降)の装飾～ }
tr td + td { ～2列目(以降)の装飾～ }
tr td + td + td { ～3列目(以降)の装飾～ }
tr td + td + td + td { ～4列目(以降)の装飾～ }
tr td + td + td + td + td { ～5列目(以降)の装飾～ }
上記のように「+」記号を使って記述する隣接兄弟セレクタは、「指定の要素の隣にある要素」を対象にして装飾できます。つまり、上記の5行のソースは以下のような意味になります。- 「tr要素に含まれるtd要素」(＝1列目以降)が対象
- 『「tr要素に含まれるtd要素」の隣にあるtd要素』(＝2列目以降)が対象
- 〔『「tr要素に含まれるtd要素」の隣にあるtd要素』の隣にあるtd要素〕(＝3列目以降)が対象
- 《〔『「tr要素に含まれるtd要素」の隣にあるtd要素』の隣にあるtd要素〕の隣にあるtd要素》(＝4列目以降)が対象
- ｛《〔『「tr要素に含まれるtd要素」の隣にあるtd要素』の隣にあるtd要素〕の隣にあるtd要素》の隣にあるtd要素｝(＝5列目以降)が対象
この場合、「1列目のための装飾」は「1列目以降全部の列」に適用され、「2列目のための装飾」は「2列目以降全部の列」に適用され……というように、後方にすべて適用される点に注意が必要です。1列ずつ個別に適用されるわけではありません。
■th要素とtd要素の混合で作成している場合
もし、「1列目だけはth要素で作成してあり、2列目以降はすべてtd要素で作成してある」という場合なら、以下のように記述することで、1列ずつ個別に装飾できます。
tr th { ～1列目の装飾～ }
tr th + td { ～2列目の装飾～ }
tr th + td + td { ～3列目の装飾～ }
tr th + td + td + td { ～4列目の装飾～ }
tr th + td + td + td + td { ～5列目の装飾～ }
この場合は、「1列目のための装飾」は「1列目(＝th要素)」だけに適用されますし、「2列目のための装飾」は「2列目(＝th要素の隣のtd要素)」だけに適用されます。ただし、th要素が複数個ある場合は、1列ごとの装飾にはなりません。さて、ここまでで、CSSソースだけで表の列(縦方向)を一括装飾する方法の概要をご紹介いたしました。最後に、具体的な表のサンプルを用意して、実際に列を一括して装飾する例をご紹介いたします。
