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

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

jquery script that retrieves the href attribute of the anchor tag located near the button that is currently being clicked

When the window is resized, the nested div parent and child are overlapping

Arranging rows of a specific height within a table at any location

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

Preventing the display of AngularJS HTML tags while the app is being loaded

What are the steps to effectively utilize my search bar alongside Google Custom Search?

Step-by-step guide on creating a linear graph in CSS using a table

Switch Image on Hover in Panel Group

How do Box and Grid components differ in Material-UI?

Basic JavaScript framework centered around the Document Object Model (DOM) with a module structure similar to jQuery. Currently facing challenges with

Issue with SideNav function in MaterializeCss following recent update

How to optimize form fields in Bootstrap by utilizing the size/maxlength attributes in HTML inputs

Innovative CSS techniques and outdated web browsers

AngularJS - varying actions based on which input field I interacted with first

Potential Issue with CSS General Sibling Selector

Using CSS to cut out a triangle shape from an image

What is causing my button to act in this way?

Adjust the Size of Bootstrap 4 Dropdown Caret Icon