CSS3 Olumsuzluk (:NOT) Seçicisi

CSS3 bir derya şeklinde geliyor, Hongkiat‘ın ‘Olumsuzluk (:NOT) Seçicisi’ üzerine bir inceleme yazısını görünce öğrenme amaçlı bloglamak istedim.

Konuya yabancı kalanlara ufak bir açıklama ile başlayalım, CSS Seçicileri {*2} ile :hover, :focus, :active şeklinde tanımlamalar yapıyorduk, CSS3 :nth-child() ve türevleri ile oldukça heyecanlandık ve kısa süre önce de :not() seçicisi ile olay bambaşka bir boyuta taşındı.

Tarayıcı Uyumu:
Internet Explorer 7 ve 8 desteklemiyor
Firefox 1+
Chrome 2+
Opera 9.2 desteklemiyor, 9.5+ destekliyor
Safari 1.3+

Basit bir örnek ile kullanımını açıklayayım. :NOT Seçicisi ile bu olmayanları seç şeklinde bir seçim yapabiliyorsunuz.

Aşağıdaki örneği incelerseniz p *:not(em) diyerek p’nin altındaki tüm elementlerden em olmayanları seç dedik ve bu elementlere kırmızı renk verdik.

<p><q>CSS3</q> Olumsuzluk <em>(:NOT)</em> <span>Seçicisi</span></p>

ve

p
{
  background:yellow; font-size:24px
}

p *:not(q)
{
  background:red
}

p *
{
  background:blue
}

Sonuç:

Dikkatinizi çekmek istediğim nokta, :NOT seçisi ile p *:not(em) diyerek p’nin altındaki em olmayan elementler diyoruz. Böylece ‘Olumsuzluk’a etki etmedi.
[güzel bir demo] [kendiniz deneyin] [kaynak]

Ne mi yapılabilir? via

Teşekkürler.