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

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

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

0
Spedwards 13 Ноя 2014 в 11:52

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 в 09:58

Взгляните на спецификацию псевдокласса :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 в 09: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 в 09:05