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

In Angular, encountering difficulty accessing object members within an array when using custom pipes

Here is a custom pipe that I have created, but I am facing an issue accessing the members of the customfilter array, which is of type Item. import { Pipe, PipeTransform } from '@angular/core'; import {Bus} from '/home/pavan/Desktop/Pavan ...

htmlangulartypescript

Changing the background color of the canvas using Javascript

I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...

javascripthtmlcsscanvas

How can CSS be instructed to "apply the following most specific rule in order to determine this property"?

Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production. The discrepancy stems from the order of rules within the file. For instance, when defining an element like ...

cssmaterial-uijss

Issues regarding innerHTML

I have a collapsed table with a link that collapses its content. My goal is to change the link (such as from "+" to "-" and vice versa) using JavaScript. I was able to achieve this, but now my table no longer collapses. Here is the code snippet: <div c ...

javascriptjqueryhtmltwitter-bootstrapjstl

Stop tooltips from appearing on hyperlinks in Internet Explorer

Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...

htmlinternet-explorertooltip

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

htmlcss

What is the best way to make an HTML form show fields depending on certain conditions?

Initially, I created an index page containing a form with various fields. The utility was built to handle all the fields, but now there's been a change in requirements. What I need is for only the Controller Type and Test Type fields to be displayed f ...

javascripthtmlcss

Add Text to Bootstrap Modal Window

The bootstrap modal body is not containing all of my content and some of it is overflowing. <div class="modal fade" tabindex="-1" role="dialog" id= "blockModel"> <div class="modal-dialog"> <div class="modal-content"> < ...

jqueryhtmlcssbootstrap-modal

Retrieve the ID by accessing the descendant tag's getAttribute within the <tr id> element, followed by proceeding to the td element and finally the input tag to obtain its specific ID

After exploring various methods, I found that some work well in the Chrompath extension but not when applied as a script. I have also attempted using this xpath: //table[@id = 'level3InnerTable_1']/tbody/tr[@id = 'Billable Client']/td[ ...

javaseleniumxpathcss-selectorswebdriverwait

Stylesheet specific to Internet Explorer not loading

My Rails application (link) is experiencing display bugs in Internet Explorer. I am trying to fix these bugs by making changes in the app/views/layouts/application.html.haml file where I have included: /[if IE] ...

htmlcssinternet-explorerconditional-comments

Utilizing Multiple Checkboxes for Precision Search Refinement

Big thanks to Khalid Ali for the support provided up until now. I am currently working with an array of songs that each have descriptions, keywords, etc. I have a set of checkboxes that I want to use to refine a search. Essentially, if someone selects the ...

javascripthtmlvue.jssearchfiltering

Can you explain how to modify the hover color of a word with select letters already colored using CSS?

Changing colors of a link before and during hover state One problem I'm facing is having a link where the first and last letters are red while the ones in between are black. This color combination should remain the same, even if the link has been vis ...

htmlcss

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image below. Here is my code snippet: ...

htmltwitter-bootstrapcss

WebGl - Perspective skewing perspective

I've been working on implementing an oblique projection in WebGL, but I'm encountering an issue where the projection appears identical to ortho. Here's the snippet of code setting up the projection matrix: mat4.identityMatrix(pMatrix); ...

javascripthtmlmatrixwebgl

Creating uniform-sized cards with CSS and Bootstrap

Is there a way to ensure consistent card size across all lines? I've noticed that the cards in the second line are taller. Can we base the height of all cards on this? https://i.sstatic.net/KgZwu.png Below is the HTML code: <div class="row"&g ...

cssangularflexboxbootstrap-5

Using JQuery to manipulate `this`, its children, its siblings, and more

Can anyone help me determine the most effective way to send data from a get request to a specific div? My challenge is to send it only to a div that is related to the one triggering the action. For example, when I click on the message_tab, I want to send t ...

javascriptjqueryhtml

Placeholder fails to appear

After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...

javascriptjqueryhtmlcss

Responsive Bootstrap 4 Login Form with customized top height

This login form was created using Bootstrap 4, starting with a preset that I then customized to fit my needs. As someone new to Bootstrap and CSS, I struggled with making the form responsive. When resizing the window, the top portion gets cut off and is no ...

htmlbootstrap-4

The issue of AngularJS inline style color not functioning in Internet Explorer 11 has been identified

Hello, I am currently attempting to dynamically change the color of a p tag. However, I am facing issues with IE-11 not supporting this functionality. How can I resolve this problem? <p style="color:{{userData.color}} !important;">{{userData.someTex ...

htmlcssangularjsstylesinline

Utilize varying sizes within a single column using Bootstrap

I am struggling to create a heading that spans the entire width of my listview within Bootstrap. Despite being in the same column, the heading does not extend as far as the listview. I desire for the title to stretch all the way across the list, leading m ...

csstwitter-bootstrap