CODEWITHSUNDEEP
cssselector
user2134389
user2134389

Reputation: 5

CSS selector code last element

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?

Upvotes: 0

Views: 191

Answers (3)

Nitesh
Nitesh

Reputation: 15779

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.

Upvotes: 2

Alarid
Alarid

Reputation: 818

Use this CSS to get the last child :

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

Upvotes: 2

MarioDS
MarioDS

Reputation: 13073

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.

Upvotes: 0

Related Questions