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

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

Concern with Isotope's masonry feature

Radio boxes vanish in Safari when -webkit-perspective is applied

Tips for customizing the background of form inputs in React-Bootstrap

The reliability of jQuery posting varies

Ways to center text within a nested div in a parent div with table-cell styling

Load the div using ajax upon submitting the form

I am struggling to successfully upload a video in Laravel

Ensure that HTML5 form fields are validated dynamically to make them mandatory

Issues with jQueryUI sortable causing flickering and erratic movement while attempting to reorder and position items within the list

Trouble with placing an absolutely positioned element using Tailwindcss

Attempting to align a CSS card flip within a Bootstrap layout

Covering the full width of the page, the background image

The ExpressJS EJS issue arises when trying to access a property that is undefined

Tips on effectively centering a wide div

Adding margin to an HTML element causes the entire page to shift downward

Choosing identical elements within comparable sub-divisions

Instructions for duplicating the current website address into another browser window or document without user input

I'm curious about how I can apply @media queries given that certain phones possess higher resolution than computers