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>
javascripthtmlcss

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

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');
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

htmlcss

I am struggling to grasp the concept of how the g flag in JavaScript's string.match(regexp) method operates

In the JavaScript book "The Good Parts", there is an explanation of the method string.match(regexp): The match method works by comparing a string with a regular expression. Its behavior varies based on whether or not the g flag is present. Without the g ...

javascriptregexstringmatchgflags

Sporadic UnhandledPromiseRejectionWarning surfacing while utilizing sinon

Upon inspection, it appears that the objects failApiClient and explicitFailApiClient should be of the same type. When logging them, they seem to have identical outputs: console.log(failApiClient) // { getObjects: [Function: getObjects] } console.log(expli ...

javascripttypescriptpromisemocha.jssinon

PHP - The form page freezes up every time I try to submit the form

Hey there! I've encountered an issue with my form submission. Everything works perfectly fine, except when the Title field is left blank. Here's a snippet of my HTML code: Title: <input type="text" name="title"><br /> Description:&l ...

phphtmlforms

Guide on how to validate react-multiselect with the use of Yup validation schema

If the multiselect field is empty, the validation message 'Product is required' is not being displayed. How can I validate this field? Here is the validation schema: validationSchema={ Yup.object().shape({ productID: Yup.string().requi ...

javascriptreactjsreact-hooksmaterial-ui

Issue with rendering object in Three.js ply loader

Just starting out with three.js and Angular 13, using three.js v0.137.0. I'm attempting to load and preview a ply file from a data URL, but all I see after rendering is a bunch of lines, as shown in this screenshot - how the ply file renders. The .pl ...

javascriptangularthree.js

The transparency of an image is being lost when it is used in a modal

I am facing an issue when trying to append a modal that contains only a transparent gif. The problem arises when the transparent background of the gif is not displayed properly. There seems to be no issue with the transparency settings of the gifs themselv ...

htmlcssvue.js

Tips for preventing the use of eval when invoking various functions

Here's a snippet of code I've been using that involves the use of eval. I opted for this approach as it seemed like the most straightforward way to trigger various factory functions, each responsible for different web service calls. I'm awa ...

javascriptangularjs

Providing static files in Express while utilizing mustache templates

I'm struggling to configure Express to serve a directory of static mustache files. I have an object with data like this: { a: 'Hello :)' b: 'Goodbye :(' } Along with two files: public/a.html <div>{{a}}</div> pu ...

javascriptnode.jsexpressmustachemiddleware

When utilizing a third-party library in conjunction with Vuetify, the V-menu may have a tendency to automatically close right after

Incorporating cytoscape into a vuetify SPA has been successful for the most part. The graph renders within a v-card-element, and I can navigate to a different page using the vue router when clicking a note in the graph. However, when attempting to replace ...

javascriptvue.jsvuetify.jscytoscape.js

Error in TypeScript code for combined Slider and Input onChange functionality within a Material-UI component

HandleChange function is used to update the useState for Material-UI <Slider /> and <Input />. Here is the solution: const handleChange = (event: Event, newValue: number | number[]) => { const inputValue = (event.target as HTMLInputEle ...

javascriptreactjstypescriptmaterial-uislider

Combining TypeScript and JavaScript for efficient mixins

I came across an article on MDN discussing the usage and creation of mix-ins (link). Intrigued, I decided to try implementing it in TypeScript: type Constructor = new (...args: any) => any; function nameMixin(Base: Constructor) { return class extends ...

javascripttypescriptdynamicsubclassmixins

Basic AJAX request not functioning properly

I am encountering an issue with a very simple AJAX call on my localhost. I am using a Windows 10 Machine with XAMPP running. I have checked the packages, and it seems that the AJAX request is not being sent to handle.php. Can someone help me figure out wha ...

phpjqueryhtmlajax

Adjusting the font size in Bootstrap grid rows to include an offset

I am currently working on improving site navigation using the Bootstrap Grid system. My goal is to create a layout with 3 columns and two rows structured as follows: |Title | |Login| |Subtitle|Menu buttons| | Everything seems to be functi ...

htmlcsstwitter-bootstrap

Elements featured in the header: logo, tagline, graphics, and more

I'm interested in designing a schema with the following elements: I'm contemplating whether it would be beneficial to have a separate container for the logo and slogan. Additionally, I am considering if it is advantageous to create a container f ...

css

When executing a function, the previous React state continues to linger

Why is the updateUser() function only updating the last user instead of all users despite using useCallback and including users as a dependency? The expected output after clicking the update button should be: {"id":1,"name":"John& ...

javascriptreactjs

Interactive tabs displaying real-time information

My goal is to create tabbed content based on a tutorial I found online. Following the tutorial step by step works perfectly, but now I want to take it a step further and make the tabs dynamic. The issue arises when some tabs have no content, so I need to g ...

javascriptreactjs

Having trouble with running sudo commands on Hyper in Windows 10?

Working on a Windows 10 system without any VM software, I've installed hyper to utilize node and npm. My laptop has just one account, which is also the local account administrator. Surprisingly, even though I have all the permissions, I am unable to r ...

javascriptnode.jsbashnpmhyper

Creating a searchable and filterable singleSelect column in the MUI DataGrid: A step-by-step guide

After three days of working on this, I feel like I'm going in circles. My current task involves fetching data from two API sources (json files) using the useEffect hook and storing them in an array. This array contains a large number of products and a ...

javascriptreactjstypescriptdatagridmui-x-data-grid

What is the best way to remove horizontal scrolling and reduce element size on mobile devices?

My current project is utilizing the Material-ui framework, and I have a situation where numerous anchor elements are being displayed as a table within a Paper component from mui. However, due to the length of this table, it causes a horizontal scroll bar t ...

cssreactjsmaterial-designmaterial-ui