Geek asks and answers

CSS selector to select a group of variable elements

I have an HTML table in which I want to highlight group variables of 3 rows, for which rows 0-3 are highlighted, rows 4-6 are not specified, rows 7-9 are highlighted, etc.

The best solution I've come up with so far:

tr:nth-child(6n + 1),
tr:nth-child(6n + 2),
tr:nth-child(6n + 3) {
   background-color:#eee;
}

Can these selectors be condensed into one selector?

+5
source share
3 answers

Yes, it is possible in one selector (but is it better?)

If you do this in groups of ten (as your comment says this is your final goal), it may not be worth doing, and not have ten separate selectors, as separate selectors are likely to be clearer.

Groups of three ( see violin )

tr:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6)) {
    background-color: #eee;
}

(. )

tr:not(:nth-child(20n+11)):not(:nth-child(20n+12)):not(:nth-child(20n+13)):not(:nth-child(20n+14)):not(:nth-child(20n+15)):not(:nth-child(20n+16)):not(:nth-child(20n+17)):not(:nth-child(20n+18)):not(:nth-child(20n+19)):not(:nth-child(20n+20)) {
    background-color: #eee;
}

, , / , , , "". .

+2

, , <tbody> .

http://codepen.io/cimmanon/pen/KqoCs

tbody:nth-child(odd) {
  background: #CCC;
}

<table>
    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
+1

If this is purely the case, I don’t want you to manually type all these selectors, you could use the CSS preprocessor to generate them for you.

http://codepen.io/cimmanon/pen/Hrimz

Sass:

@mixin fat-zebra($rows) {
  $collector: ();
  @for $r from 1 through $rows {
    $collector: append($collector, unquote("&:nth-child(#{$rows * 2}n+#{$r})"), comma);
  }
  #{$collector} {
    @content;
  }
}

td {
    @include fat-zebra(3) {
        background: yellow;
    }
}

Conclusion:

td:nth-child(6n+1), td:nth-child(6n+2), td:nth-child(6n+3) {
  background: yellow;
}

More lines?

td {
    @include fat-zebra(10) {
        background: yellow;
    }
}

Conclusion:

td:nth-child(20n+1), td:nth-child(20n+2), td:nth-child(20n+3), td:nth-child(20n+4), td:nth-child(20n+5), td:nth-child(20n+6), td:nth-child(20n+7), td:nth-child(20n+8), td:nth-child(20n+9), td:nth-child(20n+10) {
  background: yellow;
}
0
source

More articles:


All Articles