コニファ・ロゴ

csstest:CSS 疑似要素や疑似クラスを使って、tableのセルをハイライト

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; 
	}

 

 

 

戻るボタン