Individually Styling List Elements with CSS
Fri May 18, 2012 - 03:20 pm
Omari Celestine
Individually Styling HTML List Elements
If you are looking to style individual list items then here is how you can. This is done using the CSS parameter :nth-child().
So with my application, I will be creating five list items, applying some basic styles to them and applying a green background to the third item.
First let's work with our html portion.
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<ul>
Now let's apply some basic css styles to our list with our default background color being red.
#list {
margin: 0;
padding: 0;
}
#list li {
margin: 0;
padding: 12px;
display: inline;
background: #CC0000;
}
/* Style our third element with a green background */
#list li:nth-child(3) {
background: #006600;
}
Now this would finalize our list styling and apply our styling as defined by our css file. You can download the attachment file for a sample script of how the code actually works.