Я работаю с CSS и задаюсь вопросом, почему следующая часть не работает:

.container:not(#topic-title>.container)

Есть ли еще способ добиться того же? Я открыт для решений JavaScript.

0
Spedwards 13 Ноя 2014 в 11:52
Чего вы пытаетесь достичь?
 – 
Rahul Desai
13 Ноя 2014 в 11:54
Я пытаюсь создать элемент, который не является дочерним элементом другого.
 – 
Spedwards
13 Ноя 2014 в 11:54
1
Селекторы CSS никогда не могут идти «вверх» (то есть обратно к родителю, когда вы спускаетесь к дочерним элементам). Ваш селектор спрашивает «Контейнер, который не содержит заголовка темы с другим контейнером среди его дочерних элементов», предположительно не то, что вы хотели. Можете ли вы опубликовать полное правило CSS, которое вы хотите? А еще лучше сделать скрипку или что-то подобное?
 – 
Amadan
13 Ноя 2014 в 11:55
В CSS вы можете работать только с детьми и братьями и сестрами, но не с родителями.
 – 
pavel
13 Ноя 2014 в 11:56
1
@Amadan: я прочитал селектор немного по-другому: «Контейнер, который не является дочерним элементом заголовка темы». Основываясь на принятом ответе, я считаю, что именно это имел в виду спрашивающий.
 – 
BoltClock
23 Ноя 2014 в 10:04

3 ответа

Лучший ответ

Вы можете использовать этот селектор:

:not(#topic-title) > .container
.container {
    height:20px;
}
:not(#topic-title) > .container {
    background:green;
}
<div id="topic-title">
    <div class="container">parent #topic-title</div>
</div>
<div>
    <div class="container"> parent not #topic-title</div>
</div>
3
web-tiki 13 Ноя 2014 в 12:58
div здесь не нужен, так как элемент не был указан, а id может быть в разделе, main, div, span, li и так далее. :not(#topic-title) > .container соответствует любому элементу (а также универсальному селектору *:not(#topic-title) > .container)
 – 
FelipeAls
13 Ноя 2014 в 12:56
Вы правы, это лучше для дальнейших читателей. Обновленный ответ
 – 
web-tiki
13 Ноя 2014 в 13:05
1
div был прав в моем случае, но вы разделяете хорошее мнение.
 – 
Spedwards
13 Ноя 2014 в 14:10

Взгляните на спецификацию псевдокласса :not: (жирный мой)

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

Где

A simple selector is either a type selector, universal selector, 
attribute selector, class selector, ID selector, or pseudo-class. 

Следовательно, #a>.b не простой селектор, и поэтому селектор .b:not(#a>.b) не работает.

2
Danield 13 Ноя 2014 в 12:30

Вот пример с background-color, пример margin будет аналогичным. Идея: установите значение по умолчанию для всей страницы, а затем отмените его, если вам это не нужно.

.container {
  background-color: red;
}
#topic-title > .container {
  background-color: inherit;
}
<div>
  <div id="topic-title">
    <div class="container">A</div>
  </div> 
  <div class="container">B</div>
</div>
<div class="container">C</div>
-1
Amadan 13 Ноя 2014 в 12:05