CSS if / else оператор для подсчета элементов списка

Question

Мне нужен оператор if / else для моего CSS, который может подсчитывать элементы списка.Возможно ли это?

По сути, я хочу сказать, что если в списке менее 10 элементов, контейнер UL должен иметь ширину 200 пикселей, а если список содержит более 10 элементов, то он должен иметь ширину 400 пикселей.Что-то в этом роде.

Можно ли это сделать?

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

Answer 1

CSS только делает стили, но не динамически (если только с помощью JS). для этой задачи вы можете использовать следующий фрагмент JS . просто чтобы убедиться, загрузите это в самый последний момент, прямо перед </body>

<script type="text/javascript">

(function resize() { 

    //get all lists with selected name
    var lists = document.getElementsByClassName('myList');

    //loop through all gathered lists
    for (i = 0; i < lists.length; i++) {

        //shorthand elements for easy use
        var list = lists[i];
        var items = list.getElementsByTagName('li');

        //append class names
        list.className = (items.length < 10) ? 'myList less' : 'myList more';
    }
}())​

</script>

.less{
    width:200px;
}
.more{
    width:400px;
}​

Answer 2

Краткий ответ: нет. CSS не предлагает никакой условной поддержки.

Длинный ответ: вам нужно использовать javascript или язык на стороне сервера, чтобы либо добавить класс, когда в списке более 10 элементов (или элементов), либо, в случае javascript, напрямую управлять стилем после его загрузки. .

Answer 3

CSS не имеет if else операторов. Вы можете сделать это легко с помощью jQuery. Другой вариант - использовать LESS или SCSS.

Answer 4

Чистое решение CSS3

Если вы хотите поддерживать только CSS3, то это делает то, что вам нужно:

li {
   width: 200px;
}

li:nth-last-child(n+11),
li:nth-last-child(n+11) ~ li {
   width: 400px;
}

Но вам нужно будет сделать ul либо display: inline-block или float так, чтобы ширина контролировалась самими элементами li. Это может потребовать от вас обернуть ul (display: inline-block) в div, чтобы он по-прежнему оставался блочным элементом в потоке страницы, если вам это нужно.

Answer 5

Это не звучит возможно для CSS. В спецификации CSS нет логических операторов if / else. Ваша следующая лучшая ставка, вероятно, будет JavaScript. Вы можете достичь этого с помощью jQuery с помощью следующего кода:

if($('ul#target-list li').length < 10) {
    $('ul#target-list').css('width', 200);
}
else {
    $('ul#target-list').css('width', 400);
}