Укладка последнего div внутри контейнера

Прежде всего, это fiddle.Укладка последнего div внутри контейнера

Я пытаюсь создать последний div, который находится внутри другого div с контейнером класса. ': селектор last-child не работает.

HTML код:

<div class="container"> 
<div class="div-one"> 
    <h5> This is Div One </h5> 
</div> 
<div class="div-two"> 
    <h5> This is Div Two </h5> 
</div> 
<div class="div-three"> 
    <h5> This is Div Three </h5> 
</div> 
<div class="div-four"> 
    <h5> This is Div Four </h5> 
</div>

Я пытаюсь стиль 'Div-четыре'.

код CSS:

div.container:last-child{ 
    display: none; 
}

источник

2015-08-06 chandan

div.container:last-child будет выбирать каждого ребенка div.container, который является последним дочерним элементом его родителя, который в вашем случае включает в себя элементы <h5>.

Попробуйте вместо этого:

div.container div:last-child{ 
    display: none; 
}

div.container div:last-child{ 
 
    display: none; 
 
} 
 

 
h5{ 
 
    font-family: Montserrat; 
 
    color: #49c8ff; 
 
    font-size: 22px; 
 
    font-weight: 300; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
}

<div class="container"> 
 
    <div class="div-one"> 
 
     <h5> This is Div One </h5> 
 
    </div> 
 
    <div class="div-two"> 
 
     <h5> This is Div Two </h5> 
 
    </div> 
 
    <div class="div-three"> 
 
     <h5> This is Div Three </h5> 
 
    </div> 
 
    <div class="div-four"> 
 
     <h5> This is Div Four </h5> 
 
    </div> 
 
</div>

источник

2015-08-06 00:36:24

Спасибо @caeth – chandan

Вам просто нужно изменить ваш

div.container:last-child { 
    display: none; 
}

div.container div:last-child { 
    display: none; 
}

Это говорит о его местонахождение последнего div, который находится в пределах div.container вместо от каждого div в контейнере.

Последнее обновление: JSFiddle.

источник

2015-08-06 00:36:16 RhapX

https://jsfiddle.net/L6x9weLa/1/ вы ссылаетесь старая скрипка;) – Evochrome

@Evochrome спасибо, не понял, что он не обновился. Обновлена ссылка в решении. – RhapX

Селектор last-child в основном берет текущий селектор и находит последний ребенок своего родителя. Поэтому в вашем случае div.container:last-child говорит «все divs с классом контейнера, которые являются последним дочерним элементом их родителя». Ну, в вашем случае родитель <body> и последний соответствующий ребенок является <div class="container"> Что вы хотите div.container > *:last-child, который будет найти последний дочерний div.container

источник

2015-08-06 00:37:39 dman2306

Благодарим вас за подробное объяснение – chandan

Укладка последнего div внутри контейнера

ответ

Смежные вопросы