Reputation: 5
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
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
Reputation: 818
Use this CSS to get the last child :
.parentDiv .col1of5:last-child {
/* CSS */
}
Upvotes: 2
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