CSS :not() Seçicisi

Bu çeviri eksik. Bu makaleyi İngilizceden tercüme etmemize yardım edin

Ö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.

Notlar:
  • 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 simpler foo. 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Ö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