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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With