Вы уверены, что .column:not(.custom.no-edit) работал в chrome и FF, но не в сафари?
Это синтаксис CSS уровня 4. Однако известно, что Safari его поддерживает.
Давайте посмотрим на спец. c.
CSS уровень 3
Псевдокласс отрицания , : not (X) , является функциональной нотацией, принимающей простой селектор (исключая сам псевдокласс отрицания) в качестве аргумента. Он представляет элемент, который не представлен своим аргументом.
A простой селектор является либо селектором типа , универсальный селектор , селектор атрибута, селектор класса , селектор идентификатора или псевдокласс .
Что-то, что не упомянуто в спецификации c , : не () does not принять составные селекторы
A составной селектор - это последовательность простых селекторов, которые не разделены комбинатором, и представляет набор одновременных условий для одного элемента.
В основном цепочки классов и типов et c .., Пример:
.class1.class2.class3
#myId.MyClass
div.MyClass#yourId
CSS уровень 4
Псевдо отрицания -class , : not () , является функциональным псевдоклассом, принимающим список селекторов в качестве аргумента. Он представляет элемент, который не представлен своим аргументом.
На CSS уровне 4 он станет свободным для всех.
Является div:not(.a):not(.b) равным div:not(.a.b)
div {
display: inline-block;
width: 80px;
height: 80px;
border: 4px solid black;
}
div:not(.a.b) {
background-color: green;
}
<h3>div { ... }: select all divs</h3>
<h3>.a.b { ... }: select all elements with both classes .a and.b </h3>
<h3>If we combine the two using :not() The first two boxes should be green</h3>
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
Если вышеуказанный селектор сработал, он выберет все, кроме тех элементов, которые имеют оба класса a и b
Какие означает, что он не эквивалентен div:not(.a):not(.b), поскольку при этом игнорируются все элементы, имеющие оба класса или один, и мы хотим игнорировать только элементы, имеющие оба.
Solution
Мы можем использовать селекторы атрибутов до тех пор, пока css уровень 4 не упадет, если вы не против немного заботы.
div:not([class^="a b"])
Это выберет все элементы div, кроме тех, что которые начинаются с обоих классов a и b, к элементу могут быть применены другие классы, поэтому стилизация будет нормальной.
Для того, чтобы это работало, вашим классам всегда должна предшествовать строка a b То же самое касается и противоположного селектора [attr$=value]
div {
display: inline-block;
width: 80px;
height: 80px;
border: 4px solid black;
}
div:not([class^="a b"]) {
background-color: green;
}
<div class="a"></div>
<div class="b"></div>
<div class="a b some other classes"></div>
Большинство браузеров поддерживают селекторы атрибутов, поэтому поддержка не будет проблемой.