CODEWITHSUNDEEP
csscss-selectors
fcaserio
fcaserio

Reputation: 786

CSS selector if previous element has child with different className

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>

Upvotes: 4

Views: 3384

Answers (1)

justinw
justinw

Reputation: 3976

Short answer: No

You can reference CSS Selectors here.

Long Answer:

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>

Upvotes: 6

Related Questions