CSS selector code last element

Question

Need help guys I have this HTML code:

<div class="editable">
  <div>
     <div class="column col1of5">
     </div>
     <div class="column col1of5"> 
     </div>
     <div class="column col1of5"> 
     </div>
     <div class="column col1of5">
     </div>
     <div class="column col1of5">  
     </div>
     </div>
  </div>

I want to select the last .col1of5 through css how can I do that?

http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i — Pedryk, May 07 '13 at 07:29

Alarid · Accepted Answer · 2013-05-07T07:39:49.017

2

Use this CSS to get the last child :

.parentDiv .col1of5:last-child {
    /* CSS */
}

edited May 07 '13 at 07:39

answered May 07 '13 at 07:30

Alarid

770
1
6
19

Nesting selectors and rules? That's new. – MarioDS May 07 '13 at 07:32
The OP didn't say he uses Compass, which is a framework that is not natively implemented in browsers. Your code is invalid as it stands. This question is not tagged [tag:Compass]. – MarioDS May 07 '13 at 07:35
Compass is just a way to build CSS more easily. But you're right, it's my fault, just the habits... – Alarid May 07 '13 at 07:41

Nitesh · Answer 2 · 2013-05-07T07:41:42.383

I just saw your HTML.

Here is the solution. refer this fiddle.

The HTML

<div class="editable">
  <div>
     <div class="column col1of5">1</div>
     <div class="column col1of5">2</div>
     <div class="column col1of5">3</div>
     <div class="column col1of5">4</div>
     <div class="column col1of5">5</div>
     </div>
  </div>

The CSS

.editable div {
    background: none repeat scroll 0 0 #292929;
    color: white;
    list-style: none outside none;
    padding-left: 0;
    width: 200px;
}
.editable div div {
    border-bottom: 1px solid black;
    border-top: 1px solid #3C3C3C;
    padding: 10px;
}
.editable div div:first-child {
    border-top: medium none;
}
.editable div div:last-child {
    border-bottom: medium none;
    color: red;
}

Hope this helps.

score 0 · Answer 3 · answered May 07 '13 at 07:29

Try this:

.col1of5:last-child {
    /* my CSS rules */
}

:last-child is a pseudo selector and it points to the element that is the last child element of a certain node. It may sound logical enough but it can be confusing, since you may think it should be .editable:last-child. You should apply the selector to the child element itself, not the parent.

CSS selector code last element

3 Answers3