it-swarm.com.ru

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

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

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

.classname input {background: red;}

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

68
BlaM


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

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

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


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

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

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

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

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

32
ultracrepidarian

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

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

input { background: red; }
.classname input { background: white; }
24
Harper Shelby

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

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
10
Daniel A. White

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

1
Zack The Human

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

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

div.maincontent > input {
  // do something
}
0
Dan Roberts

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

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

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

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

0
wheresrhys