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

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

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

.classname input {background: red;}

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

Источник

8 ответов

Решение


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

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

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


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

$j(':not(.classname)>input').css({background:'red'});
Источник

Mozilla поддерживает псевдокласс отрицания:

:not(.classname) input {background: red;}

Смотрите также: http://developer.mozilla.org/en/Mozilla_CSS_support_chart

Источник

Обратите внимание, что псевдокласс отрицания находится в Рекомендации 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>
Источник

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

input { background: red; }
.classname input { background: white; }
Источник

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

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
Источник

Невозможно выбрать родителя сопоставляемых элементов с помощью 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>и напишите правило для стилизации всех входных данных формы. IE:

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

Или же

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

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

Источник

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

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

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

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

Источник

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

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

div.maincontent > input {
  // do something
}
Источник
Другие вопросы по тегам