CODEWITHSUNDEEP
htmlcss
user2175784
user2175784

Reputation: 183

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

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>

How can I access each li tag for styling each one separately with CSS without using inline styling?

Upvotes: 4

Views: 225

Answers (2)

jrath
jrath

Reputation: 990

Use like this:

#topmenudiv ul li {

}

Upvotes: 0

Steve Sanders
Steve Sanders

Reputation: 8651

If you want to style each list item 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>

Upvotes: 8

Related Questions