CODEWITHSUNDEEP
htmlcss
Richard
Richard

Reputation: 65600

Apply CSS to all but last element?

I've got the following html:

<ul class="menu">
  <li><a>list item 1</a></li>
  <li><a>list item 2</a></li>
  ...
  <li><a>list item 5</a></li>
</ul>

I want to apply a border to all the <a> elements except the last one.

I've been trying this:

.menu a {   
  border-right: 1px dotted #ccc;
}
.menu a:last-of-type {
  border-right: none;
}

but I end up with a border on none of the elements, I guess because the <a> in each case is the last of type.

How can I do this? I'd prefer to use only CSS if possible, and I'd like IE9 compatibility if possible.

Upvotes: 28

Views: 27451

Answers (5)

Michael
Michael

Reputation: 1079

I will do that like this

  .menu a {   
      border-right: 3px solid red;
  }
  .menu li:last-child a {
      border-right: none;
  }

Upvotes: 2

litel
litel

Reputation: 3990

You can combine your two CSS properties by using .menu li:not(:last-child) a for the elements you want to have a border. As choz points out in the comment below, it's crucial to have the li after menu because every a in the li is the last child in its current context. Thus, the pseudoclasses should apply to the li.

 .menu li:not(:last-child) a {   
  border-right: 1px dotted #ccc;
  }

Upvotes: 24

choz
choz

Reputation: 17898

To select all lis but not the last one, you can use this.

.menu li:not(:last-child) {
    border-right: 1px dotted #ccc;
}

To apply to not the last a element, you can do this.

.menu li:not(:last-child) a {
    border-right: 1px dotted #ccc;
}

Upvotes: 2

Daniel Beck
Daniel Beck

Reputation: 21524

Instead of setting a default rule for all elements and then undoing it for the last one, you can just set the rule for all elements except the last one by using :not():

li:not(:last-of-type) a {
  border-right: 1px dotted #ccc;
}

Upvotes: 2

j08691
j08691

Reputation: 208032

Change:

.menu a:last-of-type {
  border-right: none;
}

to:

.menu li:last-of-type a {
  border-right: none;
}


.menu a {   
  border-right: 1px dotted #ccc;
}
.menu li:last-of-type a {
  border-right: none;
}
<ul class="menu">
  <li><a>list item 1</a></li>
  <li><a>list item 2</a></li>
  <li><a>list item 3</a></li>
  <li><a>list item 4</a></li>
  <li><a>list item 5</a></li>
</ul>

As you surmised, the rule you were using was targeting every a because it was the last child within each li. Just move the :last-of-type to the li instead.

Upvotes: 18

Related Questions