Menu
Having the following table, is it possible to set a particular style for tr:first-child, when :first-child of previous tr has a different class? On the example table I want round corners on rows 2 and 4, but not on row 5 (since row 4 first child has the same class that row 5 first child).
<html>
<head>
<style type="text/css">
table { width: 100%; }
.a { background-color: red; }
table > tbody > tr:first-child > td.a:first-child {
border-top-left-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr><td colspan=2>title</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
<tr><td class=b>sadsf</td><td class=b>adsfs</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
</table>
</body>
</html>
973
You can reference CSS Selectors here.
Let's simplify your title first:
I want to style an element, but only if that elements immediate preceding neighbor’s first child does not have the same class.
This is easily accomplishable with javascript, but let’s pretend you can’t use javascript and you have a little freedom with your class declarations.
The first thing you should do is give each parent element a unique class name (I would choose the same as the children). So in this example it would be <tr class=“a”> and so forth.
Then we can style every :first-child with the effect you want (in this case, border-radius).
Later we can use css selectors to target every element, that has an adjacent sibling with the same class name (see docs) and we will revert or remove the style just placed on it.
Here's a fiddle using li elements as demo and below in the snippet you will see another example using table elements.
tr {
color: orange;
}
tr.a > td.a:first-child,
tr.b > td.b:first-child,
tr.c > td.c:first-child {
color: aqua; /* style all first-children*/
}
tr.a + tr.a > td.a:first-child,
tr.b + tr.b > td.b:first-child,
tr.c + tr.c > td.c:first-child {
color: orange; /*revert the styling on select elemets*/
}<table>
<tr class="a">
<td colspan="2">class-a</td><!--should be styled-->
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should NOT be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should NOT be styled-->
<td class="c">class-c</td>
</tr>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
