Blog entries alternating between a pair of distinct hues

Question

Blog entries alternating between a pair of distinct hues

I want to create a design where each post container has a different color from the one next to it. Essentially, I would like the containers to alternate between two distinct colors.

The left side shows how it currently appears, while the right side depicts how I envision it. Thank you!

CSS

#content {
  float:left;
  width:800px;
  padding:25px;
  top:-50px; left:45px;
  background:transparent;
  {block:PermalinkPage}
  width:300px;
  {/block:PermalinkPage}
}

.entry {
  width:150px;
  margin:50px;
  overflow:hidden;
  background:#336136;
  margin-left:-12px;
  margin-bottom: -10px;
  padding:12px;
  {block:PermalinkPage}
  width:250px;
  margin-left:40px;
  {/block:PermalinkPage} 
}

.entry:nth-child(odd) {
background: #000;
}

HTML

<div id="content">
  {block:Posts}
  <div class="entry">

  {miscellaneous_blocks_here}

  </div>
  {/block:Posts}
</div>

javascript html css

Answer 1

Answer №1

Is it possible to achieve the same effect using CSS3 selectors and eliminating the need for javascript?

.item:nth-child(3n+1) {
  background: #333;
}

.item:nth-child(3n+2) {
  background: #ff4500;
}

Check browser compatibility here: http://caniuse.com/css-sel3

Answer 2

Is it possible to achieve the same effect using CSS3 selectors and eliminating the need for javascript?

.item:nth-child(3n+1) {
  background: #333;
}

.item:nth-child(3n+2) {
  background: #ff4500;
}

Check browser compatibility here: http://caniuse.com/css-sel3

Answer 3

Answer №2

An effective approach would be to utilize classes and ids in your code. To implement this feature for each class, you can increment the id value by one:

$('.your_class_for_each_item').each(function(){
        i++;
            var newID='your_id'+i;
        $(this).attr('id',newID);
        $(this).val(i);
    });

This will generate ids like newID1, newID2, and so on. For styling odd and even ids differently, you can use a function similar to the following example:

function(){
  if(i%2==0){ //check if the number is even
    var z = document.getElementById('newID');
    z.setAttribute('style','background:color_for_even_numbers');
  }
  else{
   z.setAttribute('style','background:color_for_odd_numbers');
  }
}

Answer 4

An effective approach would be to utilize classes and ids in your code. To implement this feature for each class, you can increment the id value by one:

$('.your_class_for_each_item').each(function(){
        i++;
            var newID='your_id'+i;
        $(this).attr('id',newID);
        $(this).val(i);
    });

This will generate ids like newID1, newID2, and so on. For styling odd and even ids differently, you can use a function similar to the following example:

function(){
  if(i%2==0){ //check if the number is even
    var z = document.getElementById('newID');
    z.setAttribute('style','background:color_for_even_numbers');
  }
  else{
   z.setAttribute('style','background:color_for_odd_numbers');
  }
}

Blog entries alternating between a pair of distinct hues

Answer №1

Answer №2

Similar questions

`Welcome to the World of AngularJS with IntelliJ IDEA`

I've been attempting to upload application/pdf files, but I'm having trouble. Can you provide me with instructions

Is it possible to eliminate the arrows from an input type while restricting the change to a specific component?

Filtering properties of objects in Vue

What is the process of passing a JavaScript variable to PHP with AJAX?

Tips for adding additional rows or cells to a table with jQuery

positioned absolutely with a margin of 0 auto

What are some techniques for identifying duplicate HTML element IDs?

Ways to display a GIF image as a pop-up during data loading in an MVC application

Understanding the functionality of app.listen() and app.get() in the context of Express and Hapi

Exploring the mechanics of an Ajax call

"Struggling to upload an image using Selenium WebDriver because the element is not visible? Here are

Correctly executed $.Ajax and $.Post requests consistently yield errors when sent from C#

Choosing a particular svg path in d3.js using JSON attribute

The necessity of using Adobe Photoshop for optimizing a Web Template

Is it possible to pass hooks as a property value from a useEffect in React.js?

When working with HTML, how can you prevent the scrollbar from automatically scrolling to the bottom when new data is continuously added to a <textarea> element using AJAX calls?

Mouseover function ceases to function once an element is dropped

What is the best way to set the input type in AngularJS based on a variable?

Is it possible to invoke a JavaScript function within PHP code?