CSSで table > tr > td セレクタを利用してもテーブルにスタイルが反映されない
CSSで table > tr > td セレクタを利用してもテーブルにスタイルが反映されない現象について紹介します。
現象の確認
下記のHTMLファイルを準備します。
table {
border-collapse: separate;
border-spacing: 8px;
border: 1px
}
table > tr > td {
background-color:#9beae5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CssCellSpacing.css" />
</head>
<body>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>あいう</td>
<td>えおか</td>
<td>きくけ</td>
</tr>
</table>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。table部分のスタイルは設定されていますが、テーブルのセルのスタイルはスタイルシートには記述してありますが、設定されていません。
原因
WebブラウザでHTMLファイルを解析する際にタグが追加されることが原因です。
先のWebページをデバッグツールで開き、DOMの要素を表示します。
HTMLが解析されDOMツリーが構築されると下記のHTMLタグになります。
tableタグの内部にtbodyタグが追加され、tbodyタグの内部に、tr tdタグが配置されることが確認できます。そのため、CSSセレクタで tableタグの子要素としてtrタグを指定すると選択対象に含まれない状態になります。
<html><head>
<meta charset="utf-8">
<title></title>
<link href="CssCellSpacing.css" rel="stylesheet">
</head>
<body>
<table>
<tbody><tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>あいう</td>
<td>えおか</td>
<td>きくけ</td>
</tr>
</tbody></table>
</body></html>
対処法
下記のCSSファイルに変更します。子要素のセレクターではなく、下位要素のセレクターを利用することで、tbodyタグの子要素にtr td タグがあった場合でもセレクタが選択できる記述にします。
table {
border-collapse: separate;
border-spacing: 8px;
border: 1px
}
table tr td {
background-color:#9beae5;
}
または、DOMツリー構築時に追加される tbody タグを含めて、tdタグを指定する記述にします。
table {
border-collapse: separate;
border-spacing: 8px;
border: 1px
}
table > tbody > tr > td {
background-color:#9beae5;
}
表示結果
修正したCSSファイルでHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。セルにスタイルが適用されていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
