Different color for background of division

Question

Different color for background of division

I am working with a structure that looks like this:

<div class="wrapper"...>
   <a href="#"...>blah</a>
   <div class="post"...>stuff</div>
</div>

This structure repeats multiple times on a dynamic page. I am looking for a way to alternate the background colors of the div with class "post" using two different colors. However, CSS's nth-child pseudo class only works with directly sequential items.

Can someone suggest a solution (CSS, Javascript, jQuery, etc.) to achieve alternating div background colors?

javascript jquery css dom pseudo-class

Answer 1

Answer №1

Utilizing jQuery's :odd and :even selectors can make styling elements easier:

$(".post:even").css("background-color","blue"); 
$(".post:odd").css("background-color","red");

Example HTML structure:

<div class="wrapper">
   <a href="#">content here</a>
   <div class="post">more content here</div>
</div>
<div class="wrapper">
   <a href="#">additional content</a>
   <div class="post">even more content</div>
</div>
...

Visit this link for a live example.

UPDATE:

If you prefer a non-jQuery, JavaScript solution, consider the following approach:

var posts = document.getElementsByClassName("post");
for(var i=0;i<posts.length;i++) {
  posts[i].classList.add(i % 2 === 0 ? "even" : "odd");
  //or
  posts[i].style["background-color"] = i % 2 === 0 ? "blue" : "red";
}

Answer 2

Utilizing jQuery's :odd and :even selectors can make styling elements easier:

$(".post:even").css("background-color","blue"); 
$(".post:odd").css("background-color","red");

Example HTML structure:

<div class="wrapper">
   <a href="#">content here</a>
   <div class="post">more content here</div>
</div>
<div class="wrapper">
   <a href="#">additional content</a>
   <div class="post">even more content</div>
</div>
...

Visit this link for a live example.

UPDATE:

If you prefer a non-jQuery, JavaScript solution, consider the following approach:

var posts = document.getElementsByClassName("post");
for(var i=0;i<posts.length;i++) {
  posts[i].classList.add(i % 2 === 0 ? "even" : "odd");
  //or
  posts[i].style["background-color"] = i % 2 === 0 ? "blue" : "red";
}

Answer 3

Answer №2

using jQuery:

$('.entry:even').css('background-color','green');
$('.entry:odd').css('background-color','red');

Answer 4

using jQuery:

$('.entry:even').css('background-color','green');
$('.entry:odd').css('background-color','red');

Answer 5

Answer №3

In my usual practice, I implement a system where I assign a CSS class of either "odd" or "even" on the backend. For instance, if the page is being dynamically created in PHP, the code would look something like this:

for ($i = 0; $i < count($rows); $i++) {
  $css_class = 'wrapper ';  
  $css_class .= $i % 2 == 0 ? 'row_odd' : 'row_even';
  // generate html using class="$css_class"...
}

Afterwards, you can specify the colors you want for the alternating divs within your CSS class definitions.

.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }

Answer 6

In my usual practice, I implement a system where I assign a CSS class of either "odd" or "even" on the backend. For instance, if the page is being dynamically created in PHP, the code would look something like this:

for ($i = 0; $i < count($rows); $i++) {
  $css_class = 'wrapper ';  
  $css_class .= $i % 2 == 0 ? 'row_odd' : 'row_even';
  // generate html using class="$css_class"...
}

Afterwards, you can specify the colors you want for the alternating divs within your CSS class definitions.

.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }

Answer 7

Answer №4

You can achieve this using jquery's :odd and :even selectors in a simple manner:

$(".container div.item:odd").addClass('odd'); 
$(".container div.item:even").addClass('even');

http://jsfiddle.net/niklasvh/fULRZ/

Answer 8

You can achieve this using jquery's :odd and :even selectors in a simple manner:

$(".container div.item:odd").addClass('odd'); 
$(".container div.item:even").addClass('even');

http://jsfiddle.net/niklasvh/fULRZ/

Answer 9

Answer №5

.post:nth-child(odd)

Not having any luck with this method?

Answer 10

.post:nth-child(odd)

Not having any luck with this method?

Answer 11

Answer №6

:even Selector

http://api.jquery.com/even-selector/

Here is a useful resource for you.

Answer 12

:even Selector

http://api.jquery.com/even-selector/

Here is a useful resource for you.

Different color for background of division

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Using jQuery to select a specific checkbox from a group of checkboxes with identical IDs

Utilizing React to connect with Metamask and share the signer across various contracts

Tips for rotating a canvas object without changing its position

move position when clicked-javascript animation

Implement the jQuery colorbox plugin onto a dynamically generated element to display the initial image consistently

Creating a mesh parallel to the xy-plane in Three.js

Is it true that textarea is not compatible with AJAX .val() or .text() methods?

Use ajax to load the script

Error: The function callback.apply is not a valid function (Node.js and Mongodb)

Center float elements with a percentage width

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

I need to see the image named tree.png

Is it possible to automatically access the most recent Beta build through package.json and npm?

Dynamic table in Vue.js updates with saved data when button is clicked

What is preventing me from renaming a file in PHP when passed through jQuery?

I'm looking to create a Vuex getter to retrieve data from the Google API documentation – can you help

Using the map function with a React onClick handler

Error encountered when injecting Angular module

Why is the axios.get promise not getting resolved?

Exploring Mixed Type Arrays Initialization in Typescript using Class-Transformer Library