Не CSS-селекторы

Есть ли какой-то "не" CSS-селектор?

Например, когда я пишу следующую строку в своем CSS, все поля ввода внутри тега с именем класса class будут иметь красный фон.

.classname input {
  background: red;
}

Как выбрать все поля ввода, которые находятся вне тега с именем класса class?

Ответы

Ответ 1


С текущей поддержкой CSS браузера вы не можете.

Более новые браузеры теперь поддерживают его - см. ответ Сэма для получения дополнительной информации.

(См. другие ответы для альтернатив в CSS.)


Если это делается в JavaScript/jQuery, вы можете сделать:

$j(':not(.classname)>input').css({background:'red'});

Ответ 3

Обратите внимание, что псевдо-класс отрицания находится в Селекторах Уровня 3 Рекомендации и работает в последних версиях Firefox, Chrome и Safari (по крайней мере). Пример кода ниже.

<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
    div {
    border: 1px solid green;
    height: 10px;
    }
    div:not(#foo) {
    border: 1px solid red;
    }
</style>
</head>
<body>
    <div id="foo"></div>
    <div id="bar"></div>
    <div id="foobar"></div>
</body>
</html>

Ответ 4

Не сделал бы вы это, установив "глобальный" фон на красный, а затем используя имя класса, чтобы изменить остальные?

input { background: red; }
.classname input { background: white; }

Ответ 5

Я бы сделал это

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }

Ответ 6

Невозможно выбрать родительский элемент совпадающих элементов с CSS. Для их выбора вам нужно будет использовать JavaScript.

Из вашего вопроса я предполагаю, что у вас есть разметка, которая выглядит примерно так:

<form class="formclassname">
    <div class="classname">
        <input />  <!-- Your rule matches this -->
        <input />  <!-- Your rule matches this -->
    </div>
    <input />  <!-- You want to select this? -->
    <input />  <!-- You want to select this? -->
</form>

Один из вариантов - добавить класс к более высокому элементу, например <form>, и написать правило для стилей всех входов формы. То есть:

.formclassname input {
  /* Some properties here... */
}

или

.formclassname > input {
  /* Some properties here... */
}

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

Ответ 7

Я думаю, что самое близкое, что вы можете получить, это повлиять только на прямых потомков с объявлением

Этот код, например, влияет только на поля ввода непосредственно в div с классом "maincontent" 

div.maincontent > input {
  // do something
}

Ответ 8

Входы немного раздражают, потому что, в отличие от большинства других элементов html, нет необходимости возвращать все свойства css обратно к их значению по умолчанию.

Если стиль некритический (т.е. приятно иметь, но не влияет на функциональность), я бы использовал jQuery, чтобы получить массив всех входов, проверить их родителей, а затем выполнять только стиль на внешних это div. Что-то вроде:

$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});

(Кстати, я не эксперт jQuery, поэтому в этом могут быть некоторые ошибки, но в принципе что-то подобное должно работать)