How can we target every nth child element universally?

Question

How can we target every nth child element universally?

I am working with an HTML structure that has a specific layout, and I need to target all odd <span> elements globally without considering their parent elements.

Is there a way to style 1, 3, 5, 7, 9 in red color? I attempted to use :nth-child(odd) but it seems to work locally only.

body {
  counter-reset: spans;
}

span {
  counter-increment: spans;
}

span::after {
 content: counter(spans);
}
    
 span:nth-child(odd) {
   color: red;
}

<div>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

html css css-selectors

Answer 1

Answer №1

Sorry, but the :nth-child() and :nth-of-type() selectors do not work in the way you are thinking:

:nth-child(expr) only selects elements based on their position within their immediate parent element that meets the criteria of expr, not their position in the overall document or any other ancestor.
:nth-of-type selects elements based on their position among siblings that meet the condition specified by expr. This means it does not consider elements outside of its own sibling elements in the DOM tree.
Therefore, what you are trying to achieve cannot be done solely with CSS selectors as there is no :nth-overall or :nth-of-type-overall pseudo-class available.
You can accomplish this by using client-side scripting to add specific classes to those elements manually when the page loads.

For example, something like this:

const allSpans = document.getElementsByTagName("span");
for( let i = 1; i < allSpans.length; i += 2 ) {
    allSpans[i].classList.add( 'isGloballyOdd' );
}

body {
  counter-reset: spans;
}

span {
  counter-increment: spans;
}

span::after {
  content: counter(spans);
}
    
span.isGloballyOdd {
  color: red;
}

<div>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

This implementation would result in something like this:

https://i.stack.imgur.com/nHGsr.png

Answer 2

Sorry, but the :nth-child() and :nth-of-type() selectors do not work in the way you are thinking:

:nth-child(expr) only selects elements based on their position within their immediate parent element that meets the criteria of expr, not their position in the overall document or any other ancestor.
:nth-of-type selects elements based on their position among siblings that meet the condition specified by expr. This means it does not consider elements outside of its own sibling elements in the DOM tree.
Therefore, what you are trying to achieve cannot be done solely with CSS selectors as there is no :nth-overall or :nth-of-type-overall pseudo-class available.
You can accomplish this by using client-side scripting to add specific classes to those elements manually when the page loads.

For example, something like this:

const allSpans = document.getElementsByTagName("span");
for( let i = 1; i < allSpans.length; i += 2 ) {
    allSpans[i].classList.add( 'isGloballyOdd' );
}

body {
  counter-reset: spans;
}

span {
  counter-increment: spans;
}

span::after {
  content: counter(spans);
}
    
span.isGloballyOdd {
  color: red;
}

<div>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

This implementation would result in something like this:

https://i.stack.imgur.com/nHGsr.png

How can we target every nth child element universally?

Answer №1

Similar questions

Performing two consecutive nested AJAX requests in jQuery using JavaScript

Will the bootstrap carousel continue running in the background even if I hide it?

What could be causing my handle button to slide off the timeline towards the right?

Differences in Cross-Browser Styling for ListView Item Templates

Issues with Vertical Alignment and Navigation

I have successfully implemented a click effect on one image and now I wish to apply the same effect to the remaining images

Switching JSON data when clicked in Angular 2

Activating scrolling through Javascript

Does every controller page need to verify the Login Function?

Drupal 6 encountering an inline AJAX error

What is the process of utilizing a <li> for a hover selector in jquery?

What is the best way to retrieve the content of a file and set it as the value

Click on another part of the page to reveal a dropdown menu

Organizing the website's files and extensions

Can a class be created using a PHP variable as its basis?

Create text that alternates between blinking and changing content simultaneously

Including CSS in an HTML file does not function properly

Using the Play framework to showcase data in an HTML table

The most effective way to align text in a right-to-left language is by utilizing the text-align property with a

Adjust the height of an element when the maximum height is set to none