:not()¶
Псевдокласс :not
задаёт правила стилей для элементов, которые не содержат указанный селектор.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис¶
Селектор:not(<Селектор>) {
...
}
В качестве селектора могут указываться единичные псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not
(конструкция :not(:not(...))
запрещена) и псевдоэлементы.
Сертификаты¶
Пример 1¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>not</title>
<style>
input:not([type='submit']) {
border: 1px solid #ccc;
padding: 3px;
}
</style>
</head>
<body>
<form action="handler.php">
<p>Ваше имя: <input name="user" /></p>
<p>
Прилагаемый файл: <input type="file" name="file" />
</p>
<p><input type="submit" value="Отправить" /></p>
</form>
</body>
</html>
В данном примере стиль применяется ко всем элементам <input>
за исключением того, в параметрах которого установлено type="submit"
(кнопка «Отправить»). Результат примера показан на рис. 1.
Пример 2¶
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
.fancy {
text-shadow: 2px 2px 3px gold;
}
/* <p> elements that are not in the class `.fancy` */
p:not(.fancy) {
color: green;
}
/* Elements that are not <p> elements */
body :not(p) {
text-decoration: underline;
}
/* Elements that are not <div> and not <span> elements */
body :not(div):not(span) {
font-weight: bold;
}
/* Elements that are not `.crazy` or `.fancy` */
/* Note that this syntax is not well supported yet. */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}
Ссылки¶
:not()
MDN (рус.)