отобразить первый тип класса

Question

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

<ul>
   <li class="red">red</li>
   <li class="red">red</li>
   <li class="blue">blue</li>
   <li class="blue">blue</li>
   <li class="yellow">yellow</li>
   <li class="red">red</li>
   <li class="yellow">yellow</li>
</ul>

ul li {display:none}
ul li .red:first-child, ul li .blue:first-child, ul li .yellow:first-child { display:block}

Таким образом, в приведенном выше коде должны отображаться только 1-й, 3-й и 5-й элементы списка.

Answer 1

Используйте этот код и добавьте столько классов, сколько вам нужно.

.red,
.blue,
.yellow
{
    display: list-item;
}

.red ~ .red,
.blue ~ .blue,
.yellow ~ .yellow
{
    display: none;
}

Проверьте этот JSFiddle , который использует ваш HTML и отображает только первые элементы каждого класса.

Это, конечно, тривиально, если у вас есть предопределенный набор имен классов.В случае, если имена ваших классов неизвестны и / или их количество неуправляемо, лучше всего прибегнуть к некоторым сценариям (использование jQuery помогло бы многим)

Answer 2

Для любых предметов, которые вы хотите скрыть, просто добавьте к ним идентификатор.

<li class="red">red</li>
<li class="red" id="hide">red</li>

CSS:

#hide { display:none; }

Answer 3

В CSS2 вы можете использовать:

LI .red + .red { display: none; }
LI .blue + .blue { display: none; }
LI .yellow + .yellow { display: none; }

, где + - смежный селектор CSS2

Но я думаю, что невозможно использовать одно правилоза каждый цвет сразу.