CSS :not() Seçicisi
Özet
Olumsuzluk CSS pseudo-class seçicisi, :not(X)
, seçilmek istenen öğelerde bulunması istenmeyen sınıfları, kimlik değerleri vb CSS seçicilerini tanımlamak için kullanılır. Girdi olarak X yerine girilen tanımlamalara sahip olmayan öğeleri sayfa içerisinde uygular.
Fakat X ifadesi içerisinde başka olumsuzluk özelliği barındırmamalıdır.
- Gereksiz seçiciler bu pseudo-class seçicisi ile yazılabilir.
Örneğin :not(*)
ifadesi "hiçbir şey olmayan" tüm elemanlarla eşleşmesi gerektiği için boş gelir ve bu seçicideki kurallar asla uygulanamaz. - It is possible to rewrite other rules. E.g.,
foo:not(bar)
will match the same element as the simplerfoo
. Nevertheless the specificity of the first one is higher. :not(foo)
ifadesi<html>
ve<body>
içerisindeki <foo></foo> olmayan bütün elementleri seçer. .- This selector only applies to one element; you cannot use it to exclude all ancestors. For instance,
body :not(table) a
will still apply to links inside of a table, since<tr>
will match with the:not()
part of the selector.
Syntax
:not( <complex-selector-list> )where
<complex-selector-list> = <complex-selector>#
where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
Örnek
HTML
<p>Bu bir paragraf.</p>
<p class="classy">İşte sihir burada!</p>
<div>Burası yeşil olacak </div>
CSS
.classy { text-shadow: 1px 1px 2px gold; }
p:not(.classy) { color: red; }
body :not(p) { color: green; }
Sonuç
Özelleştirmeler
Özelleştirme | Durum | Açıklama |
---|---|---|
Selectors Level 4 The definition of ':not()' in that specification. |
Working Draft | Çeşitli karışık seçiciler için ifadeyi genişletir. |
Selectors Level 3 The definition of ':not()' in that specification. |
Recommendation | Standart Tanımlama. |
Browser compatibility
Özellik | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Temel Özellikler | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 9.5 | 3.2 |
Gelişmiş Çzellikler | No support | No support | No support | No support | No support | No support |
Özellik | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Temel Özellikler | 2.1 | (Yes) | 1.0 (1) | 9.0 | 10.0 | 3.2 |
Gelişmiş Çzellikler | No support | No support | No support | No support | No support | No support |