CSS: The enigma of :nth-child - what eludes my understanding?

I have 2 divs which are similar to 2 td's in a table. My goal is to have 2 red divs, followed by 2 blue divs and so on. However, my current code doesn't seem to be working. Can someone point out what I am missing:

<style>
.irow :nth-child(4n+0), .irow :nth-child(4n+1) {
  background-color: blue;
}
.irow :nth-child(4n+2), .irow :nth-child(4n+3) {
  background-color: red;
}
</style>

<div class="irow">
    <div class="col-md-8">Inès va morfler grave</div>
    <div class="col-md-4">Tête</div>
    <div class="col-md-8">Inès que des mots&nbsp;!</div>
    <div class="col-md-4">Pompon</div>
</div>
htmlcsscss-selectors

Answer №1

To achieve the desired effect, CSS must be utilized in the following manner:

.row div:nth-child(4n+1), .row div:nth-child(4n+2){
  background-color: red;
}
.row div:nth-child(4n+3), .row div:nth-child(4n+4) {
  background-color: blue;
}

The functionality is explained as follows:

xn selects every xth element, with an optional +number offset specified. For instance, 2n+1 identifies every multiple of 2, then selects the subsequent element (+1). This results in the selection of elements at indexes: `3, 5, 7, 9'.

In the provided code snippet, the first rule targets every 4th element (e.g., the 4th, the 8th). The second rule selects every 4th element and adds +1 to it (e.g., the 5th, the 9th), continuing this pattern for the remaining two rules.

JSFiddle

Answer №2

Check out this link

.irow div:nth-child(4n+1),
.irow div:nth-child(4n+2) {
  background-color: blue;
}
.irow div:nth-child(4n+3),
.irow div:nth-child(4n+4){
  background-color: red;
}

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

Is there a way for me to update the button text and class to make it toggle-like

Is there a way to switch the button text and class when toggling? Currently, the default settings show a blue button with "Show" text, but upon click it should change to "Hide" with a white button background. <button class="btn exam-int-btn">Show< ...

javascriptjqueryhtmlcssfrontend

AngularJS: Updating data in controller but not reflecting in the HTML view

Within my AngularJS app, I've come across the following code: example.html <div> <p>{{name}}</p> </div> <div> <button ng-click="someFunction()"></button> </div> exa ...

javascriptangularjshtmlangularjs-scope

Ensure that the div expands to accommodate the content

I'm experiencing an issue where the content within a div with a blue border exceeds the boundaries of the div when it expands. How can I make sure that the div extends to contain all the content? Here is a demonstration of the problem: When I expand ...

htmlcss

React not displaying wrapped div

I am facing an issue with my render() function where the outer div is not rendering, but the inner ReactComponent is displaying. Here is a snippet of my code: return( <div style={{background: "black"}}> <[ReactComponent]> ...

javascripthtmlcssreactjsreact-native

Retrieving information from PHP using AJAX

As a newcomer to the world of AJAX, I am faced with the task of retrieving data from a PHP file and storing it in a JavaScript variable. Despite exploring several examples, I have not been able to find a satisfactory solution. Here is a simplified HTML cod ...

phpjavascripthtmlajax

Utilizing Javascript to Connect with Java Web API

I'm seeking assistance with transferring a file from a browser to another device connected to a server-operated machine. I am relatively new to web application and back-end programming. The current code allows for moving a file from the server to the ...

javascripthtmlangularjs

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...

cssinstallationlesshttp-status-code-403

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

javascripthtmlangularjsjson

Incorporating outside content into HTML

Currently, I am working on a project at my job which requires me to create a comprehensive help file with multiple chapters and extensive text all within one large HTML file. However, as the text will need to be translated into different languages, I am lo ...

javascriptjqueryhtml

What is the best way to set a parent element's width to be the same as one of

Is it possible to make the width of div.main match that of table.tbl2? In this scenario, I want inline4 to be on the second line and for the width of div.main to be identical to the width of table.tbl2. .container { text-align: center; } .main { di ...

htmlcss

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

htmlcsstwitter-bootstrap

Updating and managing the CSS style for button states

In my asp.net application, I have 5 list items functioning as tabs on a Masterpage. When a user clicks on a tab, I want to redirect them to the corresponding page and visually indicate which tab is active by changing its class. What is the most effective ...

cssbutton

Words appear on the screen, flowing smoothly from left to right

I am trying to create a hover effect where a caption appears when an image is hovered over. The text should slide in from left to right, causing the container to grow along the X axis as the image is hovered over. I have managed to make the text appear on ...

csscss-transitions

Ensuring XHTML W3C Compliance with multiple details in src attribute

We are currently working on a unique image carousel feature for our website. This carousel will display clickable thumbnails that, when clicked, will show the full-size image. In order to make this work, we need to include both URLs in the HTML code. Howev ...

htmlxhtmlw3c-validation

Changing the format of PHP SQL results from vertical to horizontal

Is there a way to convert the vertical table generated by the following code into a horizontal one with stylish formatting? Additionally, is it possible to display certain columns in a popup window based on query parameters using jQuery or CSS? <html&g ...

phphtmlcsssql

When using JSON.Stringify in a React App, it only displays the first item and the length of the object instead of all the other items

Working on a React App, I encountered an issue while trying to convert an array to JSON and send it to the server. My approach was like this: console.log(JSON.stringify(mainArray)) I anticipated seeing output like this during testing: "breakfast": { ...

javascripthtmlreactjsreact-nativeweb

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

javascripthtml

Modify the contents of the 'data-content' area in the popover

Looking for a solution where I can update only a portion of the data-content within a popover. Here is an example code snippet: <div class="popover-wrapper"> <i class="glyphicon glyphicon-question-sign hover_content" ...

javascripthtmljquery

Is there a software available that can transform <style> blocks into inline CSS code?

Is there a tool available that can convert <style> blocks to the corresponding style attributes in an HTML file? For instance, if we have the following input file: <html> <head> <style> .myclass { color:red; } </style> &l ...

htmlcss

Drawer component from Material-UI placed on top of the sidebar

Currently, I am working on a project where I am using React TypeScript along with Material-UI. The issue that I am encountering is related to the width of the Drawer component provided by Material-UI. By default, the Drawer takes up the entire screen wid ...

cssreactjsmaterial-ui