CSSの疑似要素や疑似クラスを使って、tableのセルをハイライトするテストです。サンプルのtableの構造は、すべて次のようになっています。

サンプルのhtmlソース

<table class="ta01">
  <thead>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
      <td>D1</td>
      <td>E1</td>
    </tr>
    ・・・中略・・・
  </tbody>
</table>

 

サンプル01は、tr要素のhoverでスタイルを指定しています。カーソルをtable（tbody部分）の上で動かすと、行ごとにハイライト（色はskyblue）します。

サンプル01

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4
5	A5	B5	C5	D5	E5

サンプル01のCSSソース

table.ta01 tbody tr:hover {
  	background: skyblue; 
	}

 

サンプル02は、サンプル01と同様ですが、左端の行のth要素のみをハイライト（色はorange）します。tr要素のhover時に、tr要素の子要素のth要素のみにスタイルを指定しています。

サンプル02

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4
5	A5	B5	C5	D5	E5

サンプル02のCSSソース

table.ta02 tbody > tr:hover > th {
  	background: orange;
	}

 

サンプル03も、サンプル01と同様ですが、サンプル02と同じ手法で、tr要素のhover時に、tr要素の子要素のth要素の背景色をthistleに、また同じ子要素のtd要素の背景色をaquamarineにしてハイライトのスタイルを指定しています。

サンプル03

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4
5	A5	B5	C5	D5	E5

サンプル03のCSSソース

table.ta03 tbody > tr:hover > th {
  	background: thistle; 
	}
table.ta03 tbody tr:hover > td {
  	background: aquamarine; 
	}

 

サンプル04は、:not疑似クラスと:first-child疑似クラス、last-child疑似クラスを組み合わせて、tbody要素のhover時に、子要素であるtr要素のうち、最初の子要素と最後の子要素を除いたすべてのtr要素（2行目から4行目まで）の子要素のtd要素の背景色をlightblueにしてハイライトしています。

サンプル04

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4
5	A5	B5	C5	D5	E5

サンプル04のCSSソース

table.ta04 tbody:hover > tr:not(:first-child):not(:last-child) > td {
  	background: lightblue; 
	}

 

サンプル05は、table内のtd要素のうち、いくつかが空になっています。tbodyのhover時に、tbody要素の孫要素であるtd要素のうち空でないものを、:not疑似クラスと:empty疑似クラスを使ってハイライト（背景色はpink）します。A5は見た目は空ですが、空白が入っているため、空でないと判定されハイライトされます。

サンプル05

	A	B	C	D	E
1	A1	B1		D1	E1
2	A2	B2	C2	D2	E2
3	A3		C3	D3
4	A4	B4	C4		E4
5		B5	C5	D5	E5

サンプル05のCSSソース

table.ta05 tbody:hover > tr > td:not(:empty) {
  	background: pink; 
	}

 

サンプル06は、tbodyのhover時に、tbody要素の孫要素であるtd要素のうちclass属性を持っているものすべてを、属性セレクタを使ってハイライト（背景色はgreenyellow）します。

サンプル06

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4
5	A5	B5	C5	D5	E5

サンプル06のCSSソース

table.ta06 tbody:hover > tr > td[class]  {
  	background: greenyellow; 
	}

 

サンプル07は、サンプル06と同じくtbodyのhover時にclass属性を持つtd要素をgreenyellowでハイライトしますが、さらにそのtd要素のうち、classの名前が空になっているものすべてをpinkでハイライトします。

サンプル07

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4
5	A5	B5	C5	D5	E5

サンプル07のCSSソース

table.ta07 tbody:hover > tr > td[class]  {
  	background: greenyellow; 
	}
table.ta07 tbody:hover > tr > td[class='']  {
  	background: pink; 
	}