‘float:none’ property between every 3 ‘li’ using CSS

Here I have created a ul li list with float:left for each li tag. And added float:none; inline property for every third li. I want to make it with condition using CSS only.

<!doctype html>
  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
  • List 6
  • List 7
  • List 8
  • List 9
  • List 10
  • List 11
  • List 12
  • List 13
  • List 14

solution

You would use ul li:nth-child(3n) to target every third li element.

EXAMPLE HERE

ul li {   margin-right:10px;   float:left;
}
ul li:nth-child(3n) {   float:none;
}

If you wanted to get fancy, you could use :not() to exclude the third li elements from the initial styling and avoid having to overwrite float:left.

EXAMPLE HERE

ul li:not(:nth-child(3n)) {   float:left;
}