CSS'nin az bilinen seçicisi ne işe yarıyor?

Üstünüze selamlar.

HTML CSS'de herkesin bilmediği bir özellik var. CSS'de nesne seçmede kullanılan :not() kapsayıcıları da yakalayabiliyor. Aşağıdaki örnekte sınıf adı Pınarbaşı olan iki tane div etiketi var. Bunlardan birini kapsayan div etiketinin sınıf adı İzmir, birini kapsayan div etiketinin sınıf adı Konya. İşte biz bunlardan yararlanıp Pınarbaşı yazısını kızıl yapabiliyoruz.

[class*="Pınarbaşı"]:not([class*="İzmir"] *)

:not içine İzmir sınıfının altındaki herhangi nesne yazdığımızda belirttiğimiz koşul dışındaki her koşulu yakalıyoruz. Böylece İzmir sınıfı altında kalan Pınarbaşı yazısı kızıl olmuyor. Konya sınıfı altında kalan Pınarbaşı yazısı kızıl oluyor. Aşağıdaki örneği inceleyiniz.

HTML

<div class="İzmir">
    <div class="Pınarbaşı">
      Pınarbaşı
    </div>
</div>
<div class="Konya">
    <div class="Pınarbaşı">
      Pınarbaşı
    </div>
</div>

CSS

[class*="Pınarbaşı"]:not([class*="İzmir"] *){
  color: red;
}

ÇIKTI

Konuyu anlamadıysanız lütfen HTML CSS bilginizi arttırınız. Seçiciler konusuna ağırlık veriniz.