Показать кнопку, только если брат не пуст

Question

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

HTML:

<div> 
    <div id="list"> 
     <button class="addbtn">prepend item</button> 
     <ul id="items"></ul> 
     <button class="addbtn">append item</button> 
    </div> 
</div> 

Кнопки видны только при наведении DIV, содержащий список (через CSS: селектор парения).

CSS:

.addbtn { 
    display: none; 
} 

#list:hover .addbtn { 
    display: block; 
} 

Есть ли способ (без использования JS, только с помощью CSS), чтобы показывать только кнопку Append, но не кнопку перед именем, когда список пуст? Если в списке содержится хотя бы один элемент, обе кнопки должны быть показаны.

JSFiddle: https://jsfiddle.net/uLmzom18/

Edit: Вот JSFiddle с рабочим раствором: https://jsfiddle.net/khu7bahm/

Answer 1

Вы не можете влиять с помощью CSS элемента, который вверх других в потоке DOM.

Но вы можете обмануть его: инвертировать порядок элементов в HTML, и изменить их с помощью гибкого

ul:empty ~ .addbtn { 
 
    background-color: lightgreen; 
 
} 
 

 
#list, #list2 { 
 
    display: inline-flex; 
 
    flex-direction: column-reverse; 
 
}

<div> 
 
    <div id="list"> 
 
     <button class="addbtn">prepend item</button> 
 
     <ul id="items"></ul> 
 
     <button class="addbtn">append item</button> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div id="list2"> 
 
     <button class="addbtn">prepend item</button> 
 
     <ul id="items"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     </ul> 
 
     <button class="addbtn">append item</button> 
 
    </div> 
 
</div>

Answer 2

Вы не можете проверить пустоту элемента с помощью CSS, поскольку он не имеет возможности траверс вверх. Что вы можете сделать, если вы используете jQuery, это возможно.

Если вы хотите использовать чистое решение на основе CSS для вашего текущего HTML, тогда нет!

Однако, если вы используете какой-то неверный HTML, он может работать:

#items .addbtn:last-child { 
 
    display: none; 
 
}

<div> 
 
    <div id="list"> 
 
    <ul id="items"> 
 
     <button class="addbtn">prepend item</button> 
 
    </ul> 
 
    <button class="addbtn">append item</button> 
 
    </div> 
 
</div>

Здесь я дал addbtn непосредственно внутри <ul>, что неправильно. Но если вы решили, мы можем сделать его лучше:

#items .btnAdd { 
 
    margin-left: -40px; 
 
    margin-bottom: 20px; 
 
} 
 
#items .btnAdd:last-child { 
 
    display: none; 
 
}

<p>No Prepend Button</p> 
 
<div> 
 
    <div id="list"> 
 
    <ul id="items"> 
 
     <li class="btnAdd"><button class="addbtn">prepend item</button></li> 
 
    </ul> 
 
    <button class="addbtn">append item</button> 
 
    </div> 
 
</div> 
 
<hr /> 
 
<p>Prepend Button Shown</p> 
 
<div> 
 
    <div id="list"> 
 
    <ul id="items"> 
 
     <li class="btnAdd"><button class="addbtn">prepend item</button></li> 
 
     <li>One item</li> 
 
    </ul> 
 
    <button class="addbtn">append item</button> 
 
    </div> 
 
</div>

Окончательный фрагмент представляет собой чистый раствор на основе CSS.

Answer 3

Если вы можете использовать display:flex для #list, вы можете изменить порядок кнопок и использовать css sibling selector +

Смотрите эту скрипку: https://jsfiddle.net/sb7zewp6/1/

Если вам нужно больше информации об этом я могу продлить этот ответ , но я думаю, что это необходимо, только если опция display:flex.

Более подробная информация о дисплее: сгибать использование at caniuse.com

$(".addbtn").click(function() { 
 
    if($(this).hasClass("prepend")) 
 
    \t $("#items").prepend($("<li>").text("prepended item " + $("#items").children().length)); 
 
\t else 
 
\t \t $("#items").append($("<li>").text("appended item " + $("#items").children().length)); 
 
});

#list { 
 
    width: 300px; 
 
    min-height: 10em; 
 
    background-color: #fff; 
 
    display:flex; 
 
} 
 
.addbtn { 
 
    display: none; 
 
} 
 

 
#items:empty+.addbtn { 
 
    display:none !important; 
 
} 
 

 
#list:hover .addbtn { 
 
    display: block; 
 
} 
 

 

 
.addbtn.append { 
 
    order:3; 
 
} 
 
#items { 
 
    order:2; 
 
    outline:1px solid red; 
 
} 
 
.addbtn.prepend { 
 
    order:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="list"> 
 
     <button class="addbtn append">append item</button> 
 
     <ul id="items"></ul> 
 
     <button class="addbtn prepend">prepend item</button> 
 
    </div> 
 
</div>