What is the best way to apply the :nth-child() selector to target every second <div> element within ALL child elements?

Question

What is the best way to apply the :nth-child() selector to target every second <div> element within ALL child elements?

I'm currently developing a commenting feature, and I am in need of CSS to select every alternate child <div> (even children nested within the first set of children).

Consider this example HTML structure:

 <body>
<div class="comment">
    <div class="comment"/>
    <p class="something else"/>
    <div class="comment">
        <div class="comment"/>
        <div class="comment"/>
    </div>
</div>
<div class="comment"/>
<div class="comment"/>
</body>

How can I target every other <div> within the body excluding <p> tags?

The desired outcome should have the following pattern:

(Double asterisks signify even, single asterisk denotes odd, no asterisks indicate neither)

 <body>
    **<div class="comment">**
        *<div class="comment"/>*
        <p class="something else"/>
        **<div class="comment">**
            *<div class="comment"/>*
            **<div class="comment"/>**
        </div>
    </div>
    *<div class="comment"/>*
    **<div class="comment"/>**
    </body>

I aim to style every other <div> systematically.

Is there a solution for achieving this?

html css comments css-selectors

Answer 1

Answer №1

- Interactive demo showcasing threaded comments with colors
- Basic demonstration

It took some time to comprehend that the terms "even" and "odd" do not refer to CSS's predefined classes, but instead indicate the position order of a .comment div, whether nested or not.

Implementing this concept purely through CSS is extremely challenging, if not nearly impossible, without convoluted styling rules to cover all scenarios.

However, achieving this functionality with jQuery is much simpler:

$('.comment').addClass(function(i){
  return i%2 ? "odd" : "even";
});

In this code snippet, the variable i signifies the index position (0, 1, 2, 3...) of each collected .comment element in jQuery's selection process. If i modulus 2 results in 0, the "even" class is added; otherwise, the "odd" class is assigned to the element.

CSS:

div.comment{
  /* Common styles */
  color:#fff;
  margin:5px;
  border:1px solid #000;
}
.even { background:blue; } /* Odd Indices: 0, 2, 4, 6, 8... */
.odd  { background:red;  } /* Even Indices: ...1, 3, 5, 7... */

Answer 2

- Interactive demo showcasing threaded comments with colors
- Basic demonstration

It took some time to comprehend that the terms "even" and "odd" do not refer to CSS's predefined classes, but instead indicate the position order of a .comment div, whether nested or not.

Implementing this concept purely through CSS is extremely challenging, if not nearly impossible, without convoluted styling rules to cover all scenarios.

However, achieving this functionality with jQuery is much simpler:

$('.comment').addClass(function(i){
  return i%2 ? "odd" : "even";
});

In this code snippet, the variable i signifies the index position (0, 1, 2, 3...) of each collected .comment element in jQuery's selection process. If i modulus 2 results in 0, the "even" class is added; otherwise, the "odd" class is assigned to the element.

CSS:

div.comment{
  /* Common styles */
  color:#fff;
  margin:5px;
  border:1px solid #000;
}
.even { background:blue; } /* Odd Indices: 0, 2, 4, 6, 8... */
.odd  { background:red;  } /* Even Indices: ...1, 3, 5, 7... */

What is the best way to apply the :nth-child() selector to target every second <div> element within ALL child elements?

Answer №1

Similar questions

What is the best way to halt the ticking of this clock in JavaScript?

when a div contains another div and is then followed by another div, apply the following style

Why isn't the image showing up as a list style?

What could be causing this unexpected delay?

Arrange a div within a list element to create a grid-like structure

A guide to extracting data from HTML tables using Python for web scraping and exporting the results to

Remove the pop-up using its unique identifier, element, or style class

What is the best way to display a success notification when a transaction is successfully executed in web SQL

Seeking Assistance with Customizing HTML Uniform Panels

Gaining a comprehensive understanding of media queries

Add a specific CSS class to a div element depending on the status of a checkbox

I can't figure out why my code isn't functioning properly. My goal is to have a PDF file generated when the submit button is clicked on a form, and for a

Using Jquery to duplicate a row from one table and insert it into another table

css absolute positioning and setting the height of a repeating background

What is the best way to handle images overflowing a div

Is there an issue with this html code?

How to Override Global CSS in a Freshly Created Angular Component

When using IE8 with pie.htc, implementing html5shiv.js causes rounded corners to disappear once more

What is the best way to include PHP code within an HTML tag?

When using CSS @media print with inches, different dimensions are displayed post-printing