CSS selector for first TH after a caption in a table -
i have table
want select first th
if contains caption
. thought might this:
.mytable caption + tr th:first-child { /* stuff */ }
it's instead selecting nothing. bug in css or logic?
see jsfiddle: https://jsfiddle.net/ukb13pdp/1/
.objecttable th:first-child { background-color: blue; color: white; } .objecttable caption + tr th:first-child { background-color: red; }
<table class='objecttable'> <caption>caption table</caption> <tr> <th>a</th> <th>b</th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table> <br/><br/> <span>no caption table</span> <table class='objecttable'> <tr> <th>c</th> <th>d</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
the cause here same 1 described in this related question use of child selectors tr
. problem tr
elements made children of implicit tbody
element, ends being sibling of caption
tbody
, not tr
:
.mytable caption + tbody th:first-child
as aside, if th
elements reside in header row should ideally contained in thead
element , data rows contained in explicit tbody
element(s):
<table class=mytable> <caption>table header group</caption> <thead> <tr><th>header<th>header <tbody> <tr><td>row 1<td>row 1 <tr><td>row 2<td>row 2 </table>
and selected using
.mytable caption + thead th:first-child
Comments
Post a Comment