Distinctive design for three different list items

Question

Distinctive design for three different list items

Currently working on a project that involves the use of ul and li elements.

I need to change the background for every 3rd li element in alternating patterns. Since the li elements are generated from the backend, I do not know how many there will be.

I attempted using CSS3 child classes but was unsuccessful. Is there a way to achieve this using CSS or jQuery?

.list-item li
{
  width:30%;
  display:inline-block;
 }

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
</ul>

The goal is to have the same background color for list items 1, 2, 3, 7, 8, and 9, and a different color for list items 4, 5, and 6.

In the provided image, you can see that a table is used to achieve this effect by utilizing nth-child(even)/(odd) properties. Due to limitations, a table cannot be used in this case, so the solution must involve manipulating the li elements.

jquery html css

Answer 1

Answer №1

To apply styles to the 6nth, 6n-1th and 6n-2th items, use the following CSS:

.list-item li
{
  width:30%;
  display:inline-block;
  background: #cfc;
 }
.list-item li:nth-child(6n-2),
.list-item li:nth-child(6n-1),
.list-item li:nth-child(6n){
  background: #ccf;
}

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
  <li>list item 10</li>
  <li>list item 11</li>
  <li>list item 12</li>
  <li>list item 13</li>
  <li>list item 14</li>
  <li>list item 15</li>
  <li>list item 16</li>
  <li>list item 17</li>
  <li>list item 18</li>
</ul>

Answer 2

To apply styles to the 6nth, 6n-1th and 6n-2th items, use the following CSS:

.list-item li
{
  width:30%;
  display:inline-block;
  background: #cfc;
 }
.list-item li:nth-child(6n-2),
.list-item li:nth-child(6n-1),
.list-item li:nth-child(6n){
  background: #ccf;
}

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
  <li>list item 10</li>
  <li>list item 11</li>
  <li>list item 12</li>
  <li>list item 13</li>
  <li>list item 14</li>
  <li>list item 15</li>
  <li>list item 16</li>
  <li>list item 17</li>
  <li>list item 18</li>
</ul>

Answer 3

Answer №2

Try out this CSS code for a unique style:

li:nth-child(3n+0) {
    background: red;
}
li:nth-child(3n+1) {
    background: green;
}
li:nth-child(3n+2) {
    background: blue;
}

For a demonstration, visit this link

Answer 4

Try out this CSS code for a unique style:

li:nth-child(3n+0) {
    background: red;
}
li:nth-child(3n+1) {
    background: green;
}
li:nth-child(3n+2) {
    background: blue;
}

For a demonstration, visit this link

Answer 5

Answer №3

Are you aiming to accomplish this goal?

If you wish to change the styling for every third item, use the :nth-child() selector with an argument like 3n+0. By solving this equation as n increases from 0, you will determine which items will be targeted.

Just a heads up:

2n+0 is essentially even numbers
2n+1 is essentially odd numbers

Edit noted:

I have included a JavaScript function to achieve alternating rows as shown in the picture that was later added to the question. Check out the demo on the fiddle!

var alternate = (function() {

  var count = 0;
  var flipAt = 3;
  var condition = false;

  function init(num) {
    flipAt = num;
  }
  
  function process() {
    if(count === flipAt) {
      condition = condition ? false : true;
      count = 0;
    }
    count++;
    return condition ? true : false;
  }

  return {
    init : init,
    process : process
  }
})()


$('li').each(function(index, el) {
  if (alternate.process()) {
    $(el).css('background', 'blue');
  }
});

li:nth-child(3n+0) {
    background: red;
}

li:nth-child(3n+1) {
    border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>14</li>
</ul>

Answer 6

Are you aiming to accomplish this goal?

If you wish to change the styling for every third item, use the :nth-child() selector with an argument like 3n+0. By solving this equation as n increases from 0, you will determine which items will be targeted.

Just a heads up:

2n+0 is essentially even numbers
2n+1 is essentially odd numbers

Edit noted:

I have included a JavaScript function to achieve alternating rows as shown in the picture that was later added to the question. Check out the demo on the fiddle!

var alternate = (function() {

  var count = 0;
  var flipAt = 3;
  var condition = false;

  function init(num) {
    flipAt = num;
  }
  
  function process() {
    if(count === flipAt) {
      condition = condition ? false : true;
      count = 0;
    }
    count++;
    return condition ? true : false;
  }

  return {
    init : init,
    process : process
  }
})()


$('li').each(function(index, el) {
  if (alternate.process()) {
    $(el).css('background', 'blue');
  }
});

li:nth-child(3n+0) {
    background: red;
}

li:nth-child(3n+1) {
    border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>14</li>
</ul>

Distinctive design for three different list items

Answer №1

Answer №2

Answer №3

Similar questions

Link not functioning correctly on mobile-responsive CSS

It is recommended to place Laravel JavaScript files either in the view or public directories for optimal

Retrieve data from an HTML table using PHP

Embedding HTML within a PHP conditional statement

Implementing CSS Transform for Internet Explorer

You can view the object's variable 'this' for access

`Trying to conceal the tr elements on button click proves tricky with jquery`

Configuring JSON in PHP and JavaScript

Transforming an HTML5 game into a native mobile application

Exploring the jQuery syntax within Twitter Bootstrap JS files

How to modify checkbox and textarea values in a MySQL database with Jquery

FadeOut/FadeIn Iframe Animation

Convert JavaScript back into an HTML attribute

The JQuery datepicker fails to provide the date in the format mm/dd/yy

When using ngClass and the has-error class on load, the class will still be loaded even if the expression evaluates

Choose a specific inner div element within another div using jQuery

jticker.js enables autoscroll feature on a mobile device

Identify and emphasize CSS codes within PHP files using Notepad++

Embedding complex JSON information into an HTML dropdown menu

Ways to ensure a <div> element adjusts its height based on inner content dimensions