Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them should not have a different color. Is there a way to combine nth-of-type with even or odd?

Adding classes to the rows is not the solution I'm looking for. I want to solve it with CSS3, even if IE doesn't support it. Is there a way to make this work?

For the HTML:

<table class="dummyclass">
        <tbody>
            <tr class="This_should_get_a_background_color">
                    <th>Dummytext</th>
                    <td><a href="#">Dummy dummy</a></td>
            </tr>
            <tr class="This_should_get_a_background_color">
                  <th>Dumminho</th>
                  <td>Golazo</td>
            </tr>
            <tr class="This_should_get_a_background_color">
                  <th>Great game</th>
                  <td>yesterday</td>
            </tr>

             <tr class="no-background-please">
                  <th>Dummytext</th>
                  <td><a href="#">Dummy dummy</a></td>
              </tr>
              <tr class="no-background-please">
                 <th>Dumminho</th>
                 <td>Golazo</td>
              </tr>
              <tr class="no-background-please">
                 <th>Great game</th>
                 <td>yesterday</td>
               </tr>

             <tr class="This_should_get_a_background_color">
                 <th>Dummytext</th>
                 <td><a href="#">Dummy dummy</a></td>
             </tr>
             <tr class="This_should_get_a_background_color">
                    <th>Dumminho</th>
                    <td>Golazo</td>
             </tr>
             <tr class="This_should_get_a_background_color">
                    <th>Great game</th>
                    <td>yesterday</td>
                </tr>
             </tbody>
            </table>

I've tried various CSS solutions like tr:nth-of-type(2n+1), but it seems that won't work for me. You can check it out on this link.

For a code demo, visit this JSFiddle link.

The rows have descriptive classnames to help you understand my goal.

Answer №1

While there may be alternative methods, this solution is effective. It involves applying a background color to every 6th child element, starting from the first, second, and third elements.

http://jsfiddle.net/95vrb/2/

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

I personally consider this a great way to learn about the :nth-child selector. Check out more information at http://css-tricks.com/how-nth-child-works/

Answer №2

Here's a solution you can try:

.customclass tr:nth-of-type(-n+4), //First four rows
.customclass tr:nth-of-type(n+8) { //Last four rows
    background: #bbb;
}

Check it out in action: http://jsfiddle.net/UniqueUser/abc123/

Remember to adjust the code according to your specific table configuration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

Ways to make the Bootstrap form's fields align horizontally

I've exhausted all options, but I just can't seem to get the fields aligned horizontally. <form class="form-horizontal" role="form"> <div class="form-inline"> <div class="form-group"> <label for="acctName ...

Why is the Material UI React select not selecting all children except for the last one?

I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...

Adjust the size of the <textarea> to match the height of the table cell

Below is the code I am using to generate a table containing an image along with a <textarea>: <table border="1" style="border-color: #a6a6a6" cellpadding="4" cellspacing="0" width="702">\ <col width="455"> <col width="230"> ...

Is there a way to align all the content in a Bootstrap card to the center?

Need help centering content in a bootstrap card for my semester project. Can't seem to get it right! If anyone can assist, I would really appreciate it. Also hoping to increase the height of the card if possible. <link rel="stylesheet" href= ...

Ways to arrange and space out td values

Here is an example of my HTML table: <table> <tr> <td>123 - 20 - 20</td> </tr> </table> The numerical values in the table are retrieved from a database and displayed like in this image: https://i.sstatic.net/ ...

Improving iframe functionality in AngularJS

I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...

Debugging Slideshows Using JavaScript

I am currently working on creating a slideshow and I'm facing some challenges with the JavaScript functionality. Everything seems to be running smoothly except for one issue - when I click right once, it transitions correctly, but if I then click left ...

"Implement a feature in JavaScript that allows users to click on images to navigate

I have a navigation feature on my website that allows me to cycle through images using the following code: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num' ...

How can the backgroundImage css in react admin <Login /> be replaced using Material-UI?

I have been refering to the following resources: Learn about customizing login page background in React-Admin: Explore themes customization in Material-UI: https://material-ui.com/customization/components/ Instead of using a preset background, I want to ...

PHP: Locate a class within an HTML element using a regular expression

I have a question about customizing my HTML ul menu with submenus. Specifically, I am looking to dynamically add a "first-item" class to the first item within the submenu using PHP. <ul id="menu-main" class="menu"> <li id="menu-item-68" class=" ...

Incorporating external content into your website: A guide

Currently, I am in the process of developing a website for personal use (without any intention of making profit). The vision for this website is to serve as a comprehensive "directory" featuring various posts sourced from different websites - similar to a ...

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

Position the image in the center of the div both horizontally and vertically

At the moment, I have a header division with two sub-divisions called header-top and header-bottom. I am attempting to position my logo in the top-header section and align it both vertically and horizontally. The logo is aligning correctly horizontally, bu ...

Using SVG files as properties in React from a data.js file

I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

https://i.sstatic.net/muMSG.png One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - ...

Creating a div that expands to fill up the remaining height within a flex-child

I'm facing a challenge with a flex container that contains flex children. Within each flex child, there are two stacked divs, the first of which has an unknown height. My goal is to make the second div fill the remaining height available. I've be ...

The CSS hamburger menu halves in size when being closed

I have successfully created a CSS/JS hamburger menu with a transforming icon upon clicking. However, I encountered a bug where, upon clicking the 'close' button on the hamburger, the navigation menu cuts behind the header, resulting in a messy ap ...

Angular causing WKWebview to freeze

Situation Our Angular+Bootstrap app is functioning smoothly in Desktop on all operating systems, as well as Android and iPhone devices. There are no visible JavaScript errors or CSS warnings. Dilemma However, an issue arises intermittently while using t ...

Align both text and images in the middle using HTML/CSS

I attempted to align an image next to text and center everything, but I'm facing some challenges. The arrow indicates where I would prefer the image to be placed. HTML <!DOCTYPE html> <head> <title>Simple Page</title> ...