CSS код Селектор последний элемент

Question

Вам нужны помощь, ребята у меня есть этот HTML код:

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

Я хочу, чтобы выбрать последний .col1of5 через CSS, как я могу это сделать?

Answer 1

Используйте этот CSS, чтобы получить последний ребенок:

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

Answer 2

Попробуйте это:

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

:last-child является селектором псевдо и он указывает на элемент, который является последним дочерним элементом определенного узла. Это может звучать достаточно логично, но это может сбить с толку, поскольку вы можете подумать, что это должно быть .editable:last-child. Вы должны применить селектор к элементу , а не к родительскому.

Answer 3

Я только что видел ваш HTML.

Вот решение. см. это fiddle.

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> 

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; 
} 

Надеется, что это помогает.