How to style each list item in an unordered list without an inline style?

Question

I have this unordered list:

<div id="topmenudiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Run code

How can I access each tag lito style each individually using CSS without using an inline style?

Answer 1

If you want to style each element of the list differently, you can use the nth-child selector :

/* First item */
li:nth-child(1) {
  color: red;
}

/* Second item */
li:nth-child(2) {
  color: blue;
}


/* Add additional items */

<div id="topmenudiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>

Run code

Answer 2

Use this:

#topmenudiv ul li {

}