How can I specifically target and count children from a certain class using CSS selectors?

Question

How can I specifically target and count children from a certain class using CSS selectors?

Consider this HTML structure with items arranged at the same level:

<div class="h2">Title: Colors</div>
 <div class="pair">Hello world (1)</div>
 <div class="pair">Hello world (2)</div>
 <div class="pair">Hello world (3)</div>
 <div class="pair">Hello world (4)</div>
 <div class="pair">Hello world (5)</div>
 <div class="pair">Hello world (6)</div>

<div class="h2">Title: Units</div>
 <div class="pair">Hello world (1)</div>
 <div class="pair">Hello world (2)</div>
 <div class="pair">Hello world (3)</div>
 <div class="pair">Hello world (4)</div>
 <div class="pair">Hello world (5)</div>
 <div class="pair">Hello world (6)</div>

How can I target and style the n+3 and n+4 .pair elements following the previous .h2 element?

This means 1&2 are white, 3&4 are pink, 5&6 are white, and so on.

I attempted to use

.pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #FFAAAA; }

, but it includes the children of the body where the h2 elements also exist, disrupting the desired styling balance.

http://jsfiddle.net/zPYcy/2/

Edit: No pure CSS selector exists to efficiently select adjacent items in a pattern like .class (n+3). As an alternative, a series of CSS selectors using

div + .class + .class + .class ...

; combined with :nth-child(n+3) or :nth-of-type(n+3); or utilizing JS is necessary. Do you know any other workaround? Your input is appreciated!

html css css-selectors

Answer 1

Answer №1

This solution utilizes a combination of the sibling, nth-child, and nth-last-child selectors.

For each div with the class h2, an additional class "colors" and "units" should be added as follows:

<div class="h2 colors">Title: Colors</div>
...
<div class="h2 units">Title: Units</div>
...

The rule is applied to all children that have a preceding sibling with classes h2 and colors, styling the divs in pink:

.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) { 
    background: #FFAAAA; 
}

To prevent the styling from affecting divs below h2 units, two rules are applied in reverse order up to h2 units:

.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) { 
    background: #FFAAAA; 
}

To address any extra divs styled by the first rule, a white background is applied:

 .h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) { 
        background: #ffffff; 
    }

It's important to consider the odd or even number of divs in the last group when using the nth-last-child selector.

Check out this fiddle for experimentation.

Answer 2

This solution utilizes a combination of the sibling, nth-child, and nth-last-child selectors.

For each div with the class h2, an additional class "colors" and "units" should be added as follows:

<div class="h2 colors">Title: Colors</div>
...
<div class="h2 units">Title: Units</div>
...

The rule is applied to all children that have a preceding sibling with classes h2 and colors, styling the divs in pink:

.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) { 
    background: #FFAAAA; 
}

To prevent the styling from affecting divs below h2 units, two rules are applied in reverse order up to h2 units:

.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) { 
    background: #FFAAAA; 
}

To address any extra divs styled by the first rule, a white background is applied:

 .h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) { 
        background: #ffffff; 
    }

It's important to consider the odd or even number of divs in the last group when using the nth-last-child selector.

Check out this fiddle for experimentation.

Answer 3

Answer №2

If we are looking to target specifically the 3rd and 4th pairs following each occurrence of an .h2 element, this code snippet will do the trick:

.h2 + .pair + .pair + .pair,
.h2 + .pair + .pair + .pair + .pair { background: #FFAAAA; }

However, if we want to maintain the pattern of selecting every 2nd pair in a longer list, a different approach is needed.

UPDATE: To ensure our solution is scalable, we can slightly modify the HTML markup by enclosing each set of .pair items within another class:

<div class="h2 colors">Title: Colors</div>
<div class="pairList">
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    ...
</div>

By utilizing the CSS rule below, we can apply styles to any number of items seamlessly:

.pairList .pair:nth-of-type(4n+3), 
.pairList .pair:nth-of-type(4n+4) { 
    background: #FFAAAA; 
}

Check out this FIDDLE for demonstration

Answer 4

If we are looking to target specifically the 3rd and 4th pairs following each occurrence of an .h2 element, this code snippet will do the trick:

.h2 + .pair + .pair + .pair,
.h2 + .pair + .pair + .pair + .pair { background: #FFAAAA; }

However, if we want to maintain the pattern of selecting every 2nd pair in a longer list, a different approach is needed.

UPDATE: To ensure our solution is scalable, we can slightly modify the HTML markup by enclosing each set of .pair items within another class:

<div class="h2 colors">Title: Colors</div>
<div class="pairList">
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    ...
</div>

By utilizing the CSS rule below, we can apply styles to any number of items seamlessly:

.pairList .pair:nth-of-type(4n+3), 
.pairList .pair:nth-of-type(4n+4) { 
    background: #FFAAAA; 
}

Check out this FIDDLE for demonstration

Answer 5

Answer №3

Due to a combination of sheer boredom and unrelenting curiosity, I decided to craft a function for this very purpose. If you find yourself in a situation where the HTML structure is fixed and you have multiple extended rows, my custom plugin may just come in handy.

To implement the function, simply retrieve it from my jsFiddle and utilize it as shown below:

var item1 = locateRelative('h3', 'item', '5n+2');
var item2 = locateRelative('h3', 'item', '5n+4');
var result = item1.add(item2);

You have the flexibility to modify the parameters h3 and item with different class names, or experiment with various patterns that include #n, and optionally

+#</code resembling the CSS nth child selector. Adding <code>false

as a fourth argument...

locateRelative('title-header', 'content-block', '2n', false);

...will target all elements following the initial occurrence of title-header based on the specified pattern, rather than after every single instance of content-block.... if that makes any sort of sense.

I am aware that sh0ber has devised a more practical solution, but creating this function was an enjoyable endeavor that I felt compelled to share with others.

http://jsfiddle.net/ABC123/9/

Answer 6

Due to a combination of sheer boredom and unrelenting curiosity, I decided to craft a function for this very purpose. If you find yourself in a situation where the HTML structure is fixed and you have multiple extended rows, my custom plugin may just come in handy.

To implement the function, simply retrieve it from my jsFiddle and utilize it as shown below:

var item1 = locateRelative('h3', 'item', '5n+2');
var item2 = locateRelative('h3', 'item', '5n+4');
var result = item1.add(item2);

You have the flexibility to modify the parameters h3 and item with different class names, or experiment with various patterns that include #n, and optionally

+#</code resembling the CSS nth child selector. Adding <code>false

as a fourth argument...

locateRelative('title-header', 'content-block', '2n', false);

...will target all elements following the initial occurrence of title-header based on the specified pattern, rather than after every single instance of content-block.... if that makes any sort of sense.

I am aware that sh0ber has devised a more practical solution, but creating this function was an enjoyable endeavor that I felt compelled to share with others.

http://jsfiddle.net/ABC123/9/

How can I specifically target and count children from a certain class using CSS selectors?

Answer №1

Answer №2

Answer №3

Similar questions

Crafting a horizontal sub-menu that sits between the parent element and the company logo

Prevent users from inputting multiple minus signs by setting the input type to number and disabling the

Adding a class to an img tag with TinyMCE

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

Starting the animation only when the slide is visible

Chrome is experiencing compatibility issues with Datatable

Unable to alter or eliminate the grey background using material-ui

"Illuminating the way: Adding a search bar to your

Conceal elements on smaller screens using the Bootstrap 5 grid system

Transferring information to the controller and refreshing the interface (Single-page design)

What is the best way to find a specific class within a CSS file using Visual Studio Code?

Unable to shift the header menus upwards for proper alignment with the logo

Tips for maintaining the active tab in Jquery even after the page is reloaded, especially for tabs that are constantly changing

Creating geometric designs on an image and storing them using PHP

Adding multiple elements with varying content to a separate division

Toggle classes on button click

Displaying information from an array using AngularJS

How can I use CSS to position one div on top of another div, without it moving when the page is scrolled down?

The tooltip for the Google+ button stopped working

Sending values to URL using the <a> tag in HTML