Не CSS-селекторы - PullRequest
Новая
       20

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

68 голосов
/ 07 апреля 2009

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

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

.classname input {background: red;}

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

Ответы [ 8 ]

50 голосов
/ 07 апреля 2009


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

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

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


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

$j(':not(.classname)>input').css({background:'red'});
32 голосов
/ 10 июля 2009

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

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

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

29 голосов
/ 09 июня 2011

Обратите внимание, что псевдокласс отрицания находится в Рекомендации уровня селекторов *1001* и работает в последних версиях 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>
24 голосов
/ 07 апреля 2009

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

input { background: red; }
.classname input { background: white; }
10 голосов
/ 07 апреля 2009

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

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
1 голос
/ 07 апреля 2009

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

0 голосов
/ 07 апреля 2009

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

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

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

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

0 голосов
/ 07 апреля 2009

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

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

div.maincontent > input {
  // do something
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...