Bu, CSS sözde sınıf keşfindeki son seridir. Bunlar, önceki kategorilerin hiçbirine uymayan sözde sınıflardır.
Bunu yazı serisini bölümlere ayırdım. CSS Sözde Sınıflar konusu ile ilgili diğer bölümleri de aşağıdaki bağlantılarda bulabilirsiniz.
- Bağlantı Sözde Durumları
- Form Sözde Durumları
- Element Durum Seçicileri
- Diğer Sözde Durumlar
- Dil Bilimsel Durumlar
Diğer Sözde Sınıf Seçicileri
Buradaki seçicileri her hangi bir grup içine almak mümkün olmadığı için diğer başlığında ele aldık.
:is:not:has
:is
Bu seçici, hareket halindeyken birden çok öğeyi eşleştirmek için kullanılabilir.
Aşağıdakileri daha önce standart CSS’de görmüş olabilirsiniz:
|
1 2 3 4 5 6 |
div strong, div i { color: hotPink; } |
Bu, tüm güçlü ve italik öğeleri bir div pembesinde yapacaktır. Ancak, bunu biraz daha temiz hale getirmek için :is seçicisinden yararlanabiliriz.
|
1 2 3 4 5 |
div :is(strong, i) { color: hotPink; } |
:not
Yukarıdaki gibi :is seçici, bu da tam tersini yapar ve belirtilen öğelerden biri DEĞİLSE etkinleşir.
Tüm öğelere stil vermek istiyoruz, ancak strong ve italik olanlar hariç olmasını istiyorsanız. İşte size :not seçici kullanma şansı anlamına gelir.
|
1 2 3 4 5 |
div :not(strong, i) { color: hotPink; } |
Ve bu seçiciyle yapabileceğimiz bir başka harika şey de daha fazla sorguyu doğrulamak.
Örneğin alt özelliğine sahip olmayan tüm resimlere çerçeve eklemek isteyelim.
|
1 2 3 4 5 |
img:not([alt]) { outline: 10px solid red; } |
:has
Bu henüz kararlı bir çözüm değil, ancak bunun ortaya çıkması çok heyecanlı!
Şimdiye kadar, bunu yalnızca Safari Teknolojisi önizleme sürümünde kullanabilirsiniz. Ama onunla neler yapabileceğimizi görmek çok heyecan verici.
Belirli çocukları içeren bir ebeveyni hedefleyebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> div:has(p){ color:red; } </style> </head> <body> <div>Merhaba Dünya</div> <div><p>Merhaba Dünya</p></div> <p>Merhaba Dünya</p> </body> </html> |
Not: Ancak tarayıcı desteğinin şuna için olmadığını belirtmek isterim.
Emeğinize sağlık teşekkür ederim