Reputation: 6301
I have some HTML that looks like this:
<ul style="padding-left:12px; float:right;">
<li style="display:inline; padding-right:2px;">content</li>
<li style="display:inline; padding-right:2px;">content</li>
<li style="display:inline; padding-right:2px;">content</li>
<li style="display:inline; padding-right:2px;">content</li>
<li style="display:inline; padding-right:0px;">content</li>
</ul>
I would like to clean this up by using styles. However, the last li throws a wrench in things. It has a padding-right of 0 instead of 2. My challenge is, this HTML is being generated programmatically. Is there a way I can write my CSS to basically say use padding-right 2 for everything except for the last list item? If so, how?
Thanks!
Upvotes: 0
Views: 111
Reputation: 1
Ques. How to cleanup and style listing except the last item using CSS?
Ans.
li {display:inline; padding-right:2px;}
li:last-child {padding-right:0;}
** For only "first" child:**
li:first-child { //your css style here}
** For only "last" child:**
li:last-child { //your css style here}
** For any specific child use "nth-child" **
li:nth-child(1) { //your css style here}
li:nth-child(2) { //your css style here}
li:nth-child(3) { //your css style here}
li:nth-child(4) { //your css style here}
li:nth-child(5) { //your css style here}
Upvotes: 0
Reputation: 1797
<ul style="padding-left:12px; float:right;">
<li >content</li>
<li >content</li>
<li >content</li>
<li >content</li>
<li >content</li>
</ul>
ul li{display:inline; padding-right:0px;}
ul li:last-child{padding-right:0px;}
Upvotes: 0
Reputation: 124
Try this. this is te way
<ul id="nav">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
ul#nav {
padding-left:12px;
float:right;
}
ul#nav li{
display:inline;
padding-right:2px;
}
ul#nav li:last-child{
padding-right:0px;
}
Upvotes: 2
Reputation: 4504
Try This:
<ul style="padding-left:12px; float:right;" id="nav">
<li style="display:inline; ">content</li>
<li style="display:inline;">content</li>
<li style="display:inline; ">content</li>
<li style="display:inline; ">content</li>
<li style="display:inline;">content</li>
</ul>
Then we can easily make the text of the last item red with:
ul#nav li:last-child {
color: Red;
padding-right:0px;
}
ul#nav li:not(:last-child) {
padding-right:2px;
}
Upvotes: 0
Reputation: 504
Well I don't know how you're going to select this exact ul based on what you've posted, but this should work.
ul li:last-child {
padding-right: 2px !important;
}
Upvotes: 1