Есть ли способ CSS проверить, есть ли у дочернего элемента брат или сестра?

Question

Есть ли способ CSS проверить, есть ли у дочернего элемента брат или сестра? Пример:

<div class="node">
    <div class="node-child"></div>
    <div class="node-child"></div>
    <div class="node-child"></div>
</div>

Я в основном хочу отредактировать последний дочерний элемент, но только если у него нет другого обрабатывающего его И это нечетное число. Так что, если есть 4 node-child, ничего не делайте, но если есть только 3, делайте X

Answer 1

Конечно, объедините :first-child и :last-child в один селектор:

.node-child:first-child:last-child {
    /* Styles for when it is one element with no siblings */
}

Или наоборот:

.node-child:first-child:not(:last-child),
.node-child:last-child:not(:first-child),
.node-child:not(:first-child):not(:lsat-child), {
   /* Styles for when there are more than one, i.e. ther are siblings */
}

Чтобы быть еще более лаконичным для вашего конкретный c случай, используйте :only-child, где эквиваленты были бы:

.node-child:only-child {
    /* Styles for when it is one element with no siblings */
}

И эквивалентный противоположный, даже более чистый:

.node-child:not(:only-child) {
    /* Styles for when it is one element with no siblings */
}

Это совершенно безопасно для использования only-child при условии, что вы, конечно, не поддерживает IE8!