Every fourth list item, beginning with a designated number

Question

Every fourth list item, beginning with a designated number

I'm attempting to add a border to specific list items in my HTML. I want the border to start from the 9th child and then continue every 4th child after that.

For clarification, I'd like the 9th, 13th, 17th, 21st, 25th... list items to have white borders and the others to not have any borders.

I attempted this in CSS:


container ul li {
   width:50%;
   position:relative;
}

container ul li:nth-child(n+9):nth-child(4n) {
   border:1px solid #fff;
}

However, it didn't work for me. Is there another way to achieve this?

css html

Answer 1

Answer №1

You must have

ul li:nth-child(4n+9) {
/* add your styles here */
}

ul li:nth-child(4n+9) {
  color: blue
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
  <li>Item9</li>
  <li>Item10</li>
  <li>Item11</li>
  <li>Item12</li>
  <li>Item13</li>
  <li>Item14</li>
  <li>Item15</li>
  <li>Item16</li>
  <li>Item17</li>
  <li>Item18</li>
  <li>Item19</li>
  <li>Item20</li>
  <li>Item21</li>
  <li>Item22</li>
  <li>Item23</li>
  <li>Item24</li>
  <li>Item25</li>
</ul>

Answer 2

You must have

ul li:nth-child(4n+9) {
/* add your styles here */
}

ul li:nth-child(4n+9) {
  color: blue
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
  <li>Item9</li>
  <li>Item10</li>
  <li>Item11</li>
  <li>Item12</li>
  <li>Item13</li>
  <li>Item14</li>
  <li>Item15</li>
  <li>Item16</li>
  <li>Item17</li>
  <li>Item18</li>
  <li>Item19</li>
  <li>Item20</li>
  <li>Item21</li>
  <li>Item22</li>
  <li>Item23</li>
  <li>Item24</li>
  <li>Item25</li>
</ul>

Every fourth list item, beginning with a designated number

Answer №1

Similar questions

Various lists do not appear directly under each other

Utilizing Angular controllers to access data attribute values from child elements

What is the best way to incorporate web components into a React Js project?

How can I extract a specific portion of HTML content using C#?

"Title, background hue 3, and color lined up in a single

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through

JavaScript Fullcalendar script - converting the names of months and days

Leveraging moment.format Function in Angular within an HTML Context

DjangoPDFViewer

"Implementing a 960 Grid System with an HTML5 Header Element

What is the best way to apply overlays to customize a specific part of a single character while also accommodating dynamic width adjustments?

When I open Firefox, all I see is a blank page with only the h2 heading displayed

Having issues with Firefox rendering JavaScript and CSS correctly

The element is not positioned correctly due to the absolute positioning

CSS Hover Effects on Navigation Bar Not Displaying as Expected

Displaying a hidden div using the jQuery .each() method

React-bootstrap's Modal is glitching and only partially appearing on the screen

Check the row in a JQuery table by using the .on("click") function to determine if a hyperlink within the row was clicked or if

Tips for properly utilizing "require" in application.css with the Skeleton framework

Limiting the use of CSS selectors to a single class without the need to include the class name multiple