Можете ли вы подсчитать конкретный класс с помощью CSS?

Скажем, у меня есть простой список:

<ol>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li class="count">seven</li>
</ol>

Теперь я хочу только число элементов списка с классом "count"

Итак, если я добавлю CSS:

li {
    list-style-type: decimal;
}

а затем удалите тип списка для элементов списка без класса:

li:not(.count) {
    list-style-type: none;
}

Я получаю это:

FIDDLE

li {
  list-style-type: decimal;
}
li:not(.count) {
  list-style-type: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

Ответы

Ответ 1

Это можно сделать с помощью CSS-счетчиков

Если я устанавливаю display:none в сгенерированном контенте с помощью счетчика, счетчик пропускает его и переходит к следующему элементу!

FIDDLE

(Изменить: Или, альтернативно, как указывали другие, мы можем увеличивать счетчик только на элементах с определенным классом - вот так)

ol {
  counter-reset: count;
  list-style-type: none;
  padding-left: 30px;
}
li:before {
  content: counter(count)".";
  counter-increment: count;
}
li:not(.count) {
  padding-left: 13px;
}
li:not(.count):before {
  display: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

Ответ 2

Предоставление display: block элементам li без класса .count также работает.

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li:not(.count) {
    display: block;
}

Рабочая скрипта

Для старых браузеров:

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li {
    display: block;
}
li.count {
    display: list-item;
}

Рабочий скрипт

Другим способом, если вы планируете изменить состояние отображения всех элементов li, используйте псевдо-классы :after/:before с отображением в качестве элемента списка.

Рабочий скрипт

Ответ 3

Вы можете использовать HTML, чтобы установить значение элемента списка конкретно:

<ul>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li value="5" class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li value="7" class="count">seven</li>
</ul>

http://jsfiddle.net/03bu5sct/1/

Вы также можете посмотреть счетчики CSS3, если хотите чистое решение CSS.

Ответ 4

Раздел в спецификациях CSS 2.1 содержит различные примеры того, как реализовать свой настраиваемый счетчик. Вот очень простой пример, где вы:

  • Определить переменную счетчика
  • Увеличьте его для определенных элементов (в вашем случае это будут элементы .count).
  • Отобразить его внутри псевдо элементов

.custom-counter {
  /* define a counter variable */
  counter-reset: clumsycount 0;
  /* style */
  list-style-type: none;
}
.custom-counter .count {
  /* increment the counter variable */
  counter-increment: clumsycount 1;
  /* style */
  position: relative;
  background-color: #EEE;
}
.custom-counter .count:before {
  /* display the counter variable */
  content: counter(clumsycount) ".";
  /* style */
  position: absolute;
  top: 0;
  right: 100%;
  padding-right: .25em;
  background-color: #CCC;
}
<ul class="custom-counter">
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ul>

Ответ 5

li {
    list-style-type: decimal;
}

li:not(.count) {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
}

это простой хак http://jsfiddle.net/9w9vkcf3/1/

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

Ответ 6

Одним из решений может быть использование счетчиков CSS и применение его с помощью псевдоэлемента : before продвигается content свойство с счетчиком,

Счетчики могут быть указаны с двумя различными функциями: "counter()" или 'Счетчики()'. Первый имеет две формы: "счетчик (имя)" или 'counter (name, style)'. Сгенерированный текст - это значение самый внутренний счетчик данного имени в области действия этого псевдоэлемента; он форматируется в указанном стиле (по умолчанию "десятичный" ). Последняя функция также имеет две формы: "счетчики (имя, строка)" или 'counters (имя, строка, стиль)'. Сгенерированный текст - это значение все счетчики с заданным именем в области этого псевдоэлемента, от от внешнего до самого внутреннего, разделенного указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию десятичное число). См. раздел о автоматических счетчиках и нумерации для получения дополнительной информации. имя не должно быть "none", "inherit" или "initial". Такое имя вызывает объявление должно быть проигнорировано.

только в li элементах с классом count:

body {
  counter-reset: section;/* Set the section counter to 0 */
}
ol {
  list-style-type: none;
}
li.count::before {
  counter-increment: section;/* Increment the section counter*/
  content: counter(section)". ";/* Display the counter */
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>