CODEWITHSUNDEEP
htmlcss
JQuery Mobile
JQuery Mobile

Reputation: 6301

Changing CSS of last item in ul

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

Answers (6)

Himani Rawat
Himani Rawat

Reputation: 1

Here is your solution:

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;}

In case, if wants to pick/ modify any specific child element as following:

** 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

himanshu
himanshu

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

user3074446
user3074446

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

Topr
Topr

Reputation: 892

li:not(:last-child) { padding-right:2px !important; }

Upvotes: 1

sms247
sms247

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

todinov
todinov

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

Related Questions