CSS: упорядоченный список с положительного на отрицательный без нуля? - PullRequest
Новая
       10

CSS: упорядоченный список с положительного на отрицательный без нуля?

0 голосов
/ 26 сентября 2018

Можно ли создать упорядоченный список с положительного на отрицательный без нуля, используя только CSS? Пример: 

 3. Highest
 2. Higher
 1. High
-1. Low
-2. Lower
-3. Lowest

Я понимаю, что презентация весьма необычна.Цель состоит в том, чтобы создать с одним полем список наиболее и наименее избранных.

Некоторая техническая справка: поле сгенерировано в Joomla!CMS через текстовое поле FLEXIcontent .Поле сконфигурировано так, чтобы иметь возможность принимать несколько записей, и ограничено возможностью принимать только четное количество записей.Пользователь должен ввести одинаковое количество плюсов и минусов для данного поля.Я хотел бы иметь возможность контролировать все исключительно в CSS, поэтому мне не нужно создавать переопределения шаблонов, если это вообще возможно.

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

Я нашел различные ресурсы для стилизации чисел.Я считаю, что следующее не сработает, так как мне придется контролировать некоторые факторы с помощью PHP или есть ограничения на разметку: 

<ol>
    <li value=#>List Item</li> <!--needs value populated by PHP-->
</ol>

<ol reversed> <!--Stays positive and ends at 1-->
    <li>Reversed List</li> 
</ol>

<ol reversed start=2> <!--Can I control where to start based on number of children?-->
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ol>

Если задача полностью невозможна, возможно, будет более практично использовать стилизацию на основеПо количеству детей и окраске первая и последняя половина по-разному.Тем не менее, было бы очень интересно узнать, возможно ли это только с помощью CSS.

1 Ответ

0 голосов
/ 26 сентября 2018

Отличный вопрос!Это немного другой и интересный пример того, что может сделать CSS.

См. Код ниже для решения вашей проблемы.Если вы используете SASS, вы можете легко создать миксин для генерации всех необходимых вам селекторов.

Используя счетчики CSS, вы можете подделать номер списка и затем использовать nth-child для сброса счетчика, чтобы избежать отображения 0 поз.

Решение со стартовым номером 

ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5em;
}

ol[start="1"] {
  counter-reset: ol 2;
}

ol[start="1"] li:nth-child(2) {
  counter-reset: ol 0;
}

ol[start="2"] {
  counter-reset: ol 3;
}

ol[start="2"] li:nth-child(3) {
  counter-reset: ol 0;
}

ol[start="3"] {
  counter-reset: ol 4;
}

ol[start="3"] li:nth-child(4) {
  counter-reset: ol 0;
}

ol li::before {
  counter-increment: ol -1;
  content: counter(ol) '.';
  text-align: right;
  margin: 0 .5em 0 -1.5em;
  display: inline-block;
  width: 1em;
}
<h2>Start at 1</h2>
<ol start="1">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
</ol>

<h2>Start at 2</h2>
<ol start="2">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
</ol>

<h2>Start at 3</h2>
<ol start="3">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
</ol>

Решение без начального номера, но с таким же количеством положительных и отрицательных элементов списка

Если вы хотите, чтобы это работалобез необходимости добавлять атрибут start к ol и всегда иметь одинаковое количество положительных и отрицательных элементов списка, которые вы можете использовать этот CSS - но опять же требуется, чтобы вы записали его селекторы для всех необходимых номеров элементов. 

ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5em;
}

/* two items */

ol li:nth-child(1):nth-last-child(2) {
  counter-reset: ol 2;
}

ol li:nth-child(2):nth-last-child(1) {
  counter-reset: ol 0;
}

/* fouritems */

ol li:nth-child(1):nth-last-child(4) {
  counter-reset: ol 3;
}

ol li:nth-child(3):nth-last-child(2) {
  counter-reset: ol 0;
}

/* six items */

ol li:nth-child(1):nth-last-child(6) {
  counter-reset: ol 4;
}

ol li:nth-child(4):nth-last-child(3) {
  counter-reset: ol 0;
}


ol li::before {
  counter-increment: ol -1;
  content: counter(ol) '.';
  text-align: right;
  margin: 0 .5em 0 -1.5em;
  display: inline-block;
  width: 1em;
}
<h2>Two Items</h2>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

<h2>Four Items</h2>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>

<h2>Six Items</h2>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
</ol>
...