Choosing descendant elements in CSS styling

Is there a way to select child elements in sequence?

For instance:

<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>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
</ul>

The goal is to select these child elements in the following order:

2 3 6 7 10 11 14 15 18 19 22 23

I am attempting to choose the first even number, followed by the next number, and then after two numbers select the next even number and its consecutive number. |

How can this be achieved using CSS?

Answer №1

To apply styling to specific elements, you can utilize the CSS :nth-child pseudo-class selector along with Functional notation(An+B).

ul>li:nth-child(4n+2),/* where n would be 0,1,2.... so final value would be 2,6,10,... */
ul>li:nth-child(4n+3) {  /* here final value would be 3,7,11,... */
  color: red
}
<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>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
</ul>

Answer №2

To Address the Issue, Utilize the CSS Selector

ul li:nth-child(4n+2) {
  background: red;
}
ul li:nth-child(4n+3) {
  background: red;
}

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

code snippet showing HTML element's visibility

I have a component in my HTML that I need to hide: <div class="hid" > <select > <option value="M">Male</option> <option value="F">Female</option> </select> </div> To hide the component, I added ...

At what point are DOMs erased from memory?

Recently, I've been working on an application that involves continuous creation and removal of DOM elements. One thing I noticed is that the process memory for the browser tab keeps increasing even though the javascript heap memory remains steady. To ...

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve ...

Where could I be missing the mark with AngularJS?

After following some tutorials, I managed to create my first test app. However, it doesn't seem to be working properly. The main objective of the app is to extract product information from a JSON file and display it using ng-repeat. Here are the rele ...

Tips for creating a smooth transition effect using CSS/JavaScript pop-ups?

Looking for some assistance in creating a CSS pop-up with a touch of JavaScript magic. I've managed to trigger the pop-up box by clicking a link, and while it's visible, the background fades to grey. But I'm struggling to make the pop-up fad ...

Can you show me a method to integrate this HTML and CSS code into a Teachable page successfully?

Hey there, I've been encountering some challenges while working with HTML and CSS on a platform known as Teachable. Essentially, I'm aiming to create a layout with 2 columns: - Column 1 - Image - Column 2 - Text Whenever I apply <div class=" ...

The field 'post_id' cannot be identified. Available options include: comment, id, name, post_list

An error occurred while trying to process the request for post number 1. This error is related to a field resolution issue with the keyword 'post_id'. Available fields include: comment, id, name, post_list. The method used was GET and the URL req ...

Issue with menu display on Internet Explorer

Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

I am struggling with my code which has unnecessary information. <div> <div id="one" class="button"></div> <div id="two" class="button"></div> </div> <div> <div class="Home tab"> < ...

Showing Text Information from a distant web server's jQuery.getJSON() script

I am currently working on a personal project that involves displaying data from a remote server. The HTML code I am using looks like this: <script> jQuery.getJSON("http://someurl.com/something.cgi? AJZ=1&STOCK=S", function(data) { if (data.inform ...

Guide to automatically refresh the source link every 5 seconds using a different .php link

Is there a way to automatically refresh the source link every 5 seconds in order to display an image from another page on index.php? On index.php <img id="img1" class="imgNews" src="https://example.com/car.jpg"> On other.php <span id="link1"&g ...

Exploring the diversity of perspectives through Angular

Currently, I am in the process of integrating multiple views in Angular to address the footer issue on a website that I am constructing. I want to ensure that the information I have been studying and attempting to replicate is accurate. Here is what I have ...

XML, XTL, and HyperText Markup Language (HTML)

I am facing a challenge with transforming a list in an XML file into an HTML view using XSLT. The nesting of the lists is causing issues and the output is not meeting my requirements. XML: <book-part> <list id="ch4list2" list-type="simple"> & ...

Having trouble locating the search bar element on Walmart's website?

I'm currently working on a bot that needs Selenium to interact with the search bar on Walmart's website, where it will input the name of a specific product and perform a search. However, I've encountered an issue where no matter what method ...

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations. The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the an ...

Adding a new row to a Bootstrap table while maintaining the consistent style

Is there a way to dynamically add a new table row with different styling using jQuery? I'm facing this particular issue and need help in solving it. Below, I have included some screenshots of my code and the view for better understanding. Here is the ...

Triangle Top Megamenu Design

Currently, I am implementing a navbar in bootstrap v4.4.1 that includes a mega menu dropdown feature. In my design, I want to include a triangle at the top of the dropdown menu. While I have managed to add the triangle successfully, I am facing difficulti ...

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Looking at this code snippet, my goal is to have all the boxes rotate 180deg with a single click, without needing to apply different ID names: function rotateAllBoxes() { var boxes = document.getElementsByClassName("box"); for (var i = 0; i < box ...

JSDOM failing to retrieve complete list of elements from webpage

I'm currently struggling with a simple webscraper using JSDOM. Here's the code snippet I've been working on: const axios = require("axios"); const jsdom = require("jsdom"); const { JSDOM } = jsdom; let v = "15" ...

Webkit feature: Rounded border image overlay

One issue arises when applying a rounded border to an image in webkit browsers as the border ends up hidden behind the image. CSS img { border: 10px solid #000; border-radius: 100%; } HTML <img src="http://25.media.tumblr.com/tumblr_mbje ...