CSS выбирает все дочерние элементы, кроме первых двух и двух последних

Мне очень любопытно (все), чтобы увидеть, как вы будете выбирать всех дочерних элементов элемента, кроме первых двух и двух последних.

У меня есть метод, но он противный и нечитаемый. Должен быть более понятный метод, который не нуждается в 8 псевдоселекторах.

:not(:nth-child(1)):not(:nth-child(2)):not(:nth-last-child(1)):not(:nth-last-child(2)) {
    background: purple;
}

Да, это довольно ужасно. Он буквально выбирает все элементы, которые: не первый или второй первый или последний. Должен быть метод, который использует 2 в качестве полупеременной, вместо наложения на псевдоселектора.

Я думал о другом (все еще беспорядочно):

:not(:nth-child(-1n+2)):not(:nth-last-child(-1n+2)) {
    background: purple;
}

Ответы

Ответ 1

Вам даже не нужно :not(). :nth-child(n+3):nth-last-child(n+3) работает нормально.

Отметьте здесь.

Ответ 2

Я не вижу другого варианта, кроме использования :nth-child и :not(:nth-last-child).

Моя версия: hr:nth-child(n+3):not(:nth-last-child(-n+2))

DEMO

В соответствии с :nth-child ссылкой:

Псевдокласс класса :nth-child соответствует элементу, который имеет an+b-1 siblings перед ним в дереве документов, для заданного положительного или нулевого значения для n и имеет родительский элемент.

Другими словами, этот класс соответствует всем детям, индекс которых попадает в набор { an + b; ∀n ∈ N }.

So nth-child(n+3) соответствует всем элементам, начиная с третьего.

:nth-last-child работает аналогично, но с конца коллекции элементов, поэтому :nth-last-child(-n+3) соответствует только 2 элементам, начиная с конца коллекции. Из-за :not эти 2 элемента исключены из селектора.

Ответ 3

Вы можете просто установить фиолетовый для всех элементов, а затем удалить его из трех нежелательных:

element { background: purple }
element:first-child, element:nth-child(2), element:last-child, element:nth-last-child(2) {
   background: none; /* or whatever you want as background for those */
}

Это намного легче читать