Вложенные внутри css: not() селектора

Возможно ли иметь вложенные значения внутри: not selector? Например,

Всякий раз, когда я это пробовал, он не работает. Возможно, вам нужно использовать его другим способом, который я не понял? Пока что во всех примерах, которые я вижу, вы можете использовать только одно значение внутри этого селектора.

Ответы

Ответ 1

:not() принимает только один простой селектор за раз; это упоминается в Selectors 3 spec:

Псевдокласмент отрицания :not(X) является функциональной нотацией, содержащей простой селектор (за исключением самого псевдокласса отрицания) как аргумент. Он представляет элемент, который не представлен его аргументом.

Простыми селекторами в вашем примере будут два тега div, которые у вас есть. Другие простые селекторы включают селекторов классов, селекторов идентификаторов, селекторов атрибутов и псевдоклассов. Он не принимает более одного простого селектора и не принимает комбинаторы, такие как > или пробел.

В зависимости от того, какие элементы вы пытаетесь выбрать точно, может не быть способа исключить div > div:

Если вы хотите выбрать только те элементы, которые являются дочерними элементами div, которые сами не являются div, используйте вместо этого:
```
div > :not(div)
```
Если вы хотите только выбрать элементы div, родительский элемент которых не является div, используйте вместо этого:
```
:not(div) > div
```

Если вы хотите использовать это отрицание самостоятельно, выбирая все остальные элементы, тогда нет способа использовать только селектор.

Единственное возможное обходное решение в CSS, которое я могу придумать, - применить стили к элементам, которые вы хотите, без выражения :not(), а затем отменить их для div > div. Это работает для любого набора элементов, которые вы пытаетесь настроить; недостатком является то, что не все свойства могут быть легко reset.

В качестве альтернативы, если вы используете jQuery, который поддерживает :not(div > div) в отличие от версии CSS, вы можете поместить селектор в script и, для экземпляр, jQuery применяет имя класса к этим элементам, а затем предназначает этот класс в вашем CSS.