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

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - Chrome Extension: Interacting with iframe embedded within popup -