: не selector в CSS

Question

Мне нужно стилизовать текст во всех элементах HTML-документа, кроме тех, которые вложены в определенный класс. Я не могу контролировать HTML, я могу только изменить CSS.

Вот кусок кода:

<div class="container"> 
    <div class="column c1"> 
    <div class="text"> 
     text in column 1 
    </div> 
    </div> 
    <div class="column c2"> 
    <div class="text"> 
     text in column 2 
    </div> 
    </div> 
    <div class="column c3"> 
    <div class="text"> 
     text in column 3 
    </div> 
    </div> 
</div> 

Я хочу, чтобы все text элементы, за исключением тех, в c1 элемента, чтобы быть смелым. Я не знаю заранее, сколько столбцов может быть.

Я попытался следующий CSS, который использует селектор :not, но он делает все смелое:

.container { 
    display: flex; 
} 

.column { 
    padding: 0 1em; 
} 

:not(.c1) .text { 
    font-weight: bold; 
} 

Почему селектор :not не работает? Что я делаю не так? Here is a jsfiddle, чтобы испытать.

Answer 1

Это потому, что :not(.c1) будет выбрать любой элемент, который не имеет этого класса. Это может быть и .container.

Либо добавьте прямой дочерний комбинатор:

:not(.c1) > .text { 
    font-weight: bold; 
} 

Или использовать другой класс, а также:

.column:not(.c1) .text { 
    font-weight: bold; 
} 

Answer 2

Вам просто нужно переключиться с потомка на дочерний комбинатор.

Другими словами, из этого:

:not(.c1) .text 

Для этого:

:not(.c1) > .text 

revised fiddle

---

Ваш селектор ...

:not(.c1) .text { 
    font-weight: bold; 
} 

эквивалентно следующему:

*:not(.c1) .text { 
    font-weight: bold; 
} 

Этот селектор говорит:

выбрать элемент с классом text, который является потомком любого другого элемента, кроме элемента с классом c1.

Хорошо, .text является потомком div с классом c1 в одном экземпляре – поэтому он получает исключен, как вы намерены. Но .text также является потомком html, body и .container. Таким образом, правило не работает, как вы ожидаете, потому что оно удовлетворяет нескольким сценариям.

Вместо этого, попробуйте следующее:

:not(.c1) > .text { 
    font-weight: bold; 
} 

Этот селектор говорит:

выбрать элемент с классом text, когда родительский элемент не имеет класс c1.

Answer 3

См. here. Вы должны объявить класс column.

Это делает работу:

.column:not(.c1) .text { 
    font-weight: bold; 
} 

Answer 4

Это может работать также:

.column:not(.c1) .text { 
     font-weight: bold; 
    }