Switch up between two distinct colors every three elements using a single selector

Question

Switch up between two distinct colors every three elements using a single selector

I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern :

red
red
red
black
black
black
red
red
red
black

and so on.

Is there a way to achieve this using just one selector? Currently, I'm doing it like this:

tr:nth-child(6n+1) { color: red; }
tr:nth-child(6n+2) { color: red; }
tr:nth-child(6n+3) { color: red; }

But I'm looking for a more efficient solution with only 1 selector. Any ideas?

UPDATE : Check out this jsfiddle link https://jsfiddle.net/1s5s05vk/2/

css css-selectors

Answer 1

Answer №1

In my opinion, utilizing CSS would enhance the speed of performance.

.mytable tr:nth-child(6n+1), .mytable tr:nth-child(6n+2), .mytable tr:nth-child(6n+3) {
    background-color: red;
}

However, if desired, Javascript can also be employed for achieving the same result. As previously mentioned.. you have the option to assign a class such as "red" to elements where the iterator%6 is less than 4.

var rows = document.getElementsByTagName('tr');
for (var i = 0, len = rows.length; i < len; i++){
    if(i%6 < 4) {
        rows[i].classList.add("red");
    }
}

Answer 2

In my opinion, utilizing CSS would enhance the speed of performance.

.mytable tr:nth-child(6n+1), .mytable tr:nth-child(6n+2), .mytable tr:nth-child(6n+3) {
    background-color: red;
}

However, if desired, Javascript can also be employed for achieving the same result. As previously mentioned.. you have the option to assign a class such as "red" to elements where the iterator%6 is less than 4.

var rows = document.getElementsByTagName('tr');
for (var i = 0, len = rows.length; i < len; i++){
    if(i%6 < 4) {
        rows[i].classList.add("red");
    }
}

Answer 3

Answer №2

Give this a shot and see if it works for you.

tr:nth-child(-n+3) {
        background: green;
    }
    tr:nth-child(n+4) {
        background: yellow;
    }

Answer 4

Give this a shot and see if it works for you.

tr:nth-child(-n+3) {
        background: green;
    }
    tr:nth-child(n+4) {
        background: yellow;
    }

Answer 5

Answer №3

It's impossible to achieve your desired outcome using just one CSS selector.

But, you can simplify the code to avoid repetition:

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

Answer 6

It's impossible to achieve your desired outcome using just one CSS selector.

But, you can simplify the code to avoid repetition:

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

Switch up between two distinct colors every three elements using a single selector

Answer №1

Answer №2

Answer №3

Similar questions

The FAB button animation is causing delays in the transition process and is not functioning as originally anticipated

Guide to creating a simple multi-column index linking each item to a specific page reference

Chrome is experiencing a rendering problem as a result of using @Font-Face

Playing with background hues

Adding text and buttons to the initial image in the slider: a step-by-step guide

Creating a CSS triangle that smoothly transitions between two different colors

How can I create a CSS animation that fades in text blocks when hovering over an image?

Having difficulty navigating to a different page in Angular 4

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

Issue with the appearance of the footer in my Wordpress template

Missing Overlay in jQuery UI Dialog

Strange Behavior of HTML5 Audio Elements

Html elements overlapping due to incorrect positioning

Is there a way to determine the location where my website is fetching CSS and media files from?

Incorporate a CSS style element to a hyperlink button in JQuery Mobile

execute a different function once the animation has finished running with the .bind

Transition one background image into another using background positioning

Tips for generating an HTML template as a string using jQuery

Is it possible for CSS div to have a height of 100% when placed within fluid parents

Unable to display the absolute path of the image src in WebStorm