moderne CSS3-Selektoren an einer Tabelle angewendet
Es soll nicht die erste und nicht die letzte Tabellenzelle selektiert werden. Offenbar gilt das aber pro Zeile, nicht pro Tabelle.
HTML
<table>
<thead>
<tr>
<th>Entry Header 1</th>
<th>Entry Header 2</th>
<th>Entry Header 3</th>
<th>Entry Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Entry First Line 1</td>
<td>Entry First Line 2</td>
<td>Entry First Line 3</td>
<td>Entry First Line 4</td>
</tr>
<tr>
<td>Entry Line 1</td>
<td>Entry Line 2</td>
<td>Entry Line 3</td>
<td>Entry Line 4</td>
</tr>
<tr>
<td>Entry Last Line 1</td>
<td>Entry Last Line 2</td>
<td>Entry Last Line 3</td>
<td>Entry Last Line 4</td>
</tr>
</tbody>
</table>
CSS
/* Basics */
/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}
/* Einfach mal hübsch machen mit einem YAML4-Standard-Style */
table{width:100%;border-collapse:collapse;margin:1.3571em 0 0 0;color:#333;border-top:1px #ccc solid;border-bottom:1px #ccc solid;}
table caption{font-variant:small-caps;}
th,td{line-height:1.5em;vertical-align:top;padding:0.7143em 0.5em; text-align:left; color: #000;}
thead th{border-bottom:2px #000 solid;}
tbody th{border-top:1px solid #ccc;}
tbody td{border-top:1px solid #ccc;}
tbody tr:hover th,
tbody tr:hover td{background:#f1f1f1;}
/* geht nicht */
/* td:not(tbody tr:first-child td:first-of-type):not(tbody tr:last-child td:last-of-type){background: yellow} */
tbody td {background: yellow;}
tbody tr:first-child td:first-child,
tbody tr:last-child td:last-child{background: green;}
JavaScript
//Es soll "nicht die erste und nicht die letzte Tabellenzelle" selektiert werden.
// Offenbar gilt das aber pro Zeile, nicht pro Tabelle.