Есть ли способ скрыть n-й элемент в списке с помощью CSS?

Пример:

<ul class="mybuttons">
   <li class="mybutton"></li>
   <li class="mybutton"></li>
   <li class="mybutton"></li>
</ul>

Можно ли скрыть 2-й элемент с помощью css?

Ответ 1

nth-child действительно является способом CSS.

В чистом CSS синтаксис просто

li.mybutton:nth-child(2){
   display:none;
}

nth-of-type(2) также работает в этом случае.

Изменить: Хотя это ответ CSS, как уже отмечалось, это CSS3 и реализовано только в некоторых браузерах. IE и FF3 и ниже не поддерживают это изначально. Реализовано в FF3.5, Konqueror и неправильно в Chrome, Safari и Opera. nth-of-type() лучше.

Поддержка в старых браузерах потребует javascript (упрощается с помощью jQuery и др.). Селектор jQuery описан в Selectors/nthChild docs, а выше может быть выполнено с помощью $("li.mybutton:nth-child(2)").hide().

Ответ 2

n-й дочерние псевдоселекторы делают это, но они пока не получили широкого распространения и не будут на некоторое время. Вам понадобится Javascript/jQuery или выписать специальный класс для элементов, которые вы хотите скрыть, или просто спрятать элементы напрямую.

Вот как вы это сделаете с помощью jQuery:

$("ul.mybuttons li:nth-child(2)").hide();

Ответ 3

ul.mybuttons li:first-child {
   display:none;
}

Ответ 4

Сначала я установлю второй li как class= "hidden_li" в файле HTML.

Пример:

<ul class="mybuttons">
<li class="mybutton"></li>
<li class="mybutton" class="hidden_li"></li>
<li class="mybutton"></li>
</ul>

Затем я создам его так:

.hidden_li{
  visibility : hidden;
  height : 0px;
  width : 0px;
  margin : 0px;
  padding : 0px;
  overflow : hidden;
}