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?

Where is your html code ?

Alarid
– Alarid

2013-05-07 07:28:08 +00:00
Commented May 7, 2013 at 7:28 — Alarid
– Alarid, Commented May 7, 2013 at 7:28
Calm down guys he didn't indent it.

MarioDS
– MarioDS

2013-05-07 07:28:43 +00:00
Commented May 7, 2013 at 7:28 — MarioDS
– MarioDS, Commented May 7, 2013 at 7:28
stackoverflow.com/questions/7298057/…

Pedryk
– Pedryk

2013-05-07 07:29:52 +00:00
Commented May 7, 2013 at 7:29 — Pedryk
– Pedryk, Commented May 7, 2013 at 7:29

Alarid · Accepted Answer · 2013-05-07 07:39:49Z

2

Use this CSS to get the last child :

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

edited May 7, 2013 at 7:39

answered May 7, 2013 at 7:30

Alarid

8181 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MarioDS Over a year ago

Nesting selectors and rules? That's new.

MarioDS Over a year ago

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 compass.

Alarid Over a year ago

Compass is just a way to build CSS more easily. But you're right, it's my fault, just the habits...

Nitesh · Accepted Answer · 2013-05-07 07:41:42Z

2

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.

edited May 7, 2013 at 7:41

answered May 7, 2013 at 7:31

Nitesh

15.8k4 gold badges51 silver badges60 bronze badges

Comments

MarioDS · Accepted Answer · 2013-05-07 07:29:37Z

0

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.

answered May 7, 2013 at 7:29

MarioDS

13.1k15 gold badges70 silver badges123 bronze badges

Collectives™ on Stack Overflow

CSS selector code last element

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related