Apply a distinct background color to every third list item following the first three list items

I have used CSS flex and width to design a list, and now I want to apply background colors to every 3 list items after the 3rd item. However, I would like the colors to appear in pairs of 2. I have attempted to achieve this using the CSS Pseudo Class :nth-child(), but have not been successful.

Important: The design was created using only HTML and CSS.

 |  1   ||  2   ||  3   | 
 |--4---||--5---||--6---|  --- Green Background Color
 |  7   ||  8   ||  9   |
 |--10--||--11--||--12--|  --- Red Background Color
 |  13  ||  14  ||  15  |
 |--16--||--17--||--18--|  --- Green Background Color
 |  19  ||  20  ||  21  |
htmlcss

Answer №1

Utilize CSS 3 nth-of-type

table tr:nth-of-type(3n+3) td {
  background: green;
}

Live Example :

table tr:nth-of-type(3n+3) td {
  background: green;
}
 

   

<table>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    <tr><td>Table</td></tr>
    </table>

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

Displaying Unicode CSS Font Awesome Icons as Boxes in a React Project

I have incorporated the jPlayer example into a create-react-app. Encountering an issue where font-awesome icons are displaying as boxes in this CodeSandbox illustration. https://codesandbox.io/s/peaceful-heisenberg-d59nz?fontsize=14&hidenavigation=1&a ...

cssreactjsunicodefont-awesome

What is the best way to manage a download link that necessitates an Authorization token when using Angular?

I'm currently working with a REST API in combination with Angular. The issue I'm facing is related to post objects that include file attachments. Every time a user wants to download a file attachment, they must make a call to /get/file/{id}, but ...

javascriptangularjshtmldownload

What is the best way to ensure that the item beneath two images is always centered in HTML5?

When designing a webpage with text and images, it's important to consider the layout on different screen sizes. To avoid text wrapping under images, adjusting the spacing around the image is sometimes necessary. Similarly, when embedding a video, cen ...

csshtml

Boosting vertical reach within a distance

How to make the green div adjust its height based on the content like the red div? This means that when the text in the green box increases, the height of the red box should also increase to match it. I am aware that removing the span from .aaa might solve ...

htmlcssflexbox

Choosing an element within a table following a different element using Selenium

On a webpage, a table displays various plain text elements (filenames) on the left side and hyperlinks to PDF files on the right: Red report Download PDF Blue report Download PDF Green report Download PDF These pages have multiple entries, and t ...

htmlselenium

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

Creating a mobile-friendly table that remains within a specific width on smaller screens (CSS)

Ensuring consistency across all tables on my website is crucial to me, which is why I am utilizing the same class for all of them. While everything appears perfect on desktop, I'm facing challenges when it comes to mobile responsiveness. The tables fa ...

css

Is it possible for you to simulate the shift key being pressed prior to the event execution?

Is there a way to allow the user to scroll left and right horizontally without having to hold the shift key down? I want to achieve this effect by setting the "shiftKey" variable to true even when it is not physically pressed. Any suggestions on how to ...

javascripthtmlreactjs

Go through the embedded classes within the WWW::Selenium module

Is there a way in the `WWW::Selenium` library to loop through this HTML structure and extract the hrefs? <div class="myGengo_wrap full_width"> <h1>Dashboard</h1> <div class="blue list"> <span class="title">Sections ...

htmlperlseleniumloops

Struggling with aligning a div in the center

I've been struggling to get my "boxes" div centered on my page so that everything inside that div is centered instead of being pushed to the left. Unfortunately, my CSS vision didn't turn out as expected. If someone could take a look at my jsbi ...

htmlcss

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

javascriptjqueryhtmlajaxdhtml

What is the proper file format for a form action in CSS?

What I Currently Have: In my Index.html file, there are a total of 4 form elements including text fields and a dropdown. Upon submission by the user, the data is processed in confirm.html using a separate JavaScript file for formatting before being displa ...

javascripthtmlcss

Using AJAX to send data with a POST request in Django may not function properly

Let me preface by saying I have searched for solutions online, but none of them seem to address my specific issue (mainly because they use outdated methods like Jason). I am currently working on a Django project and trying to implement ajax for a particul ...

pythonhtmlpython-3.xdjangoajax

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

javascripthtmlreactjstypescript

I need to position the CSS vertical scrollbar on the right side of the page

I can't figure out how to move the vertical scrollbar to sit on the right side of my site's work page. Any help would be greatly appreciated. Below is the provided HTML code: <div class="heading"> <h1>PRINT</h1> &l ...

htmlcss

Outlook causing images to shift with unexpected 1px padding on left and top in HTML email design with PNGs and background color

Is there a way to place a transparent PNG* over a background color for creating a series of emails with just the background color being changed? I have noticed that Outlook** adds a 1px padding / margin to the left and top of the image, which allows the ba ...

htmlemailoutlook

Angular 2: Issue with disabled functionality not functioning correctly

In my TypeScript code, I have created a boolean variable called readOnlyMode. When this variable is set to true, all elements should be disabled. To achieve this, I am using [disabled]="readOnlyMode" in the HTML for elements that need to be disabled. Howev ...

htmlangulartypescript

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

I am currently working on creating a searchBar and customizing its CSS, but unfortunately, most of the styling properties seem to not be taking effect. So far, only changing colors seems to work as expected. .mainBar{ background-color: blue; width: ...

javascripthtmlcssreactjs

Tips on retrieving ajax variable in php

I'm facing an issue with passing the ajax variable to a php page. While I can successfully alert and display the value, sending it to the php page for deletion is not working as expected. Below is the code I've implemented: AJAX code: functio ...

phpjavascripthtmlajax

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

htmlcssiphonenext.jsfrontend