Utilizing CSS to Style List Items with the :nth-child Selector

How can I style my ul list items to match the design shown in the image? Can this be achieved using CSS nth-child selector or any other CSS techniques?

https://i.sstatic.net/fkfMl.jpg

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(1) {
  background: lightsteelblue;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

Answer №1

Try using the following CSS selector:

li:nth-child(4n + 1), li:nth-child(4n + 4)
:

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(4n + 1), li:nth-child(4n + 4) {
  background: lightsteelblue;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

Answer №2

Tip: To style every 4th and 1st list item, use the selector

li:nth-child(4n), li:nth-child(4n+1)

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(4n), li:nth-child(4n+1)  {
  background: lightsteelblue;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

Answer №3

Is there a better way to categorize them using classes? While nth-child can work, it becomes difficult to make changes without adjusting the formula.

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  border:1px solid white;
}

li.lightsteelblue {
  background: lightsteelblue;
}

li.slategrey {
  background: slategrey;
}
<ul>
    <li>One</li>
    <li class="lightsteelblue">Two</li>
    <li>Three</li>
    <li>Four</li>
    <li class="slategrey">Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

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

JS Code: Develop a function that generates a distribution analysis of an array

I have been working on a function that calculates the frequency distribution of an array. The aim is to output an object in which the keys represent the unique elements and the values show how frequently those elements appear. Here's the code I' ...

Is it possible to link a Lua client with a Socket.io NodeJS server?

Currently, I have set up a Node JS server running socket.io that can successfully communicate with other clients using the socket.io-client package. My next step is to develop a Lua client that connects to my socket.io server and enables the sending and ...

Is it possible to utilize a designated alias for an imported module when utilizing dot notation for exported names?

In a React application, I encountered an issue with imports and exports. I have a file where I import modules like this: import * as cArrayList from './ClassArrayList' import * as mCalc1 from './moduleCalc1' And then export them like t ...

How come my MySQL date is decreasing by one day when using JavaScript?

My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend ...

What is the importance of utilizing Responsive methods and % properties to ensure our webpage is compatible with all screen sizes?

I have been delving into the world of responsive design and media queries, but I am struggling to grasp their true purpose. After all, we can simply use "%" for sizing properties in our CSS files, right? For instance, if I specify a "width" style propert ...

Purge React Query Data By ID

Identify the Issue: I'm facing a challenge with invalidating my GET query to fetch a single user. I have two query keys in my request, fetch-user and id. This poses an issue when updating the user's information using a PATCH request, as the cach ...

Can you explain the concepts of stroke and stroke width in SVG, and how they are implemented in HTML rendering?

<svg width="400" height="400" style="background-color:green"> <circle cx="200" cy="200" r="50" stroke="red" stroke-width="5" fill="yellow"></circle></svg> <svg width="400" height="400" style="background-color:green"> ...

Loss of data in the local storage when the page is reloaded

click here to see image I have managed to save data to local Storage successfully, but it keeps disappearing when I reload the page. Can someone guide me on how to handle this issue? I am new to this and would greatly appreciate any help. Thank you. https ...

Dealing with numerous promises nested within a single promise

I'm in the process of developing a service method that fetches data from an API and returns it as a promise. The challenge here is that I need to ensure that the parent object, along with all its child objects, are fully retrieved before resolving the ...

Adjusting an item according to a specified pathway

I am currently working on dynamically modifying an object based on a given path, but I am encountering some difficulties in the process. I have managed to create a method that retrieves values at a specified path, and now I need to update values at that pa ...

Inserting values into a table using AngularJS

How can I differentiate checkboxes row-wise when trying to insert table values into the rows in HTML? <div class="col-md-8" ng-controller="checklistController" ng-init='populateChecklist(<%=request.getParameter("id")%>)'> ...

Traverse through the div elements with identical class using jQuery

Hey there! I have a bunch of classes named itemdata and I'm looking to incorporate some jQuery within each div. Within every div, there is a link that I want to extract the href attribute value from and enclose it within another <span> in that s ...

Inject an external page within a DIV container to limit the styling effects of the external page to just that specific area

Imagine you have a webpage divided into two main sections: <div id='section_1'>[various content]</div> <div id='section_2'></div> <!-- an external site will be displayed here --> In section_1, there is a ...

Deciphering the AngularJS Component Hierarchy and Managing Identifiers for Freshly Generated Objects (using HTTP)

In my project using Angular 1, I have developed a todo list application which consists of two components. The first is a smart (container) component responsible for server-side interactions, while the second is a dumb/pure/stateless presentation component ...

The security protocols prevent me from placing calls to the Steam API site from my own website

I am venturing into the creation of a web application that uses steam web APIs and I find myself at a loss on how to kickstart this project. This question perfectly encapsulates my struggles, particularly in establishing endpoints and resolving the issue. ...

Generate a custom JavaScript file designed for compatibility with multiple servers

I am looking to develop a JavaScript file that can be easily added to other websites, allowing them to access functions within my database using an API similar to the Facebook like button. This API should display the total likes and show which friends have ...

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

Retrieving the contents of a unique 404 error page using ajax

Currently attempting to retrieve the content of a custom 404 page through ajax (I need to extract a counter value from this page using Greasemonkey). Regrettably, jQuery's .fail method in ajax does not provide the option to access the page's con ...

What is the best way to instantly update multiple form input fields with the slider value as it changes?

When a value is selected from a dropdown in a form, three input fields with the same value are displayed. For example, selecting "2" from the dropdown will result in two rows with six input fields - three in the first row and another three in the second ro ...