Diğer Seçiciler

:lang(dil_kodu)

Bu şekilde oluşturulan seçicilerle lang niteliği ile belli bir dilde olduğu belirtilmiş elemanlar seçilir. Örneğin Türkçe için :lang(tr), İngilizce için :lang(en) kullanılmalıdır.


:target

Bu şekilde oluşturulan seçicilerle sayfa içindeki linkle gidilebilen kısımlar tıklandığı zaman seçilmiş olur.

<!DOCTYPE html>
<html>
<head>
<title>CSS Diğer Seçiciler</title>
<style>
p:lang(en){
    color:red;
}
p:target{
    background-color:lightgray;
}
</style>
</head>
<body>
    <a href="#p1">Paragraf 1</a>|
    <a href="#p2">Paragraf 2</a>|
    <a href="#p3">Paragraf 3</a>
    <p id="p1">Örnek Paragraf 1</p>
    <p id="p2" lang="en">Example Paragraph 2</p>
    <p id="p3">Örnek Paragraf 3</p>
</body>
</html>

Yukarıdaki örnekte dilinin İngilizce olduğu belirtilen paragrafın yazı rengi kırmızı olacaktır. Linklere tıklandığında hedef olarak belirtilen kısmın arkaplan renginini açık gri olacağı da görülecektir.


:empty

Bu şekilde oluşturulan seçicilerle içi boş olan elemanlar seçilir. Bir elemanın içinin boş olması sadece görsel açıdan boş olması ile sınırlı değildir. Bir elemenın içinin tam olarak boş olduğunu söyleyebilmek için içerisinde boş bile olsa başka bir eleman da bulunmamalıdır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Diğer Seçiciler</title>
<style>
p:empty{
    background-color:red;
    width:100px;
    height:100px;
}
</style>
</head>
<body>
    <p></p>
    <p><b></b></p>
    <p>Örnek Paragraf</p>
</body>
</html>

Yukarıdaki örnekte sadece ilk paragrafın içi boştur. Boş olan paragraflar için bir boyut belirtilmiş ve bu paragrafların arkaplan rengi kırmızı olarak tayin edilmiştir. Bu nedenle yukarıdaki kodun çıktısı "Örnek Paragraf" yazısının üzerinde bir kırmızı kutu olacaktır. İkinci paragrafın da içi boşaltıldığında aynı kutudan bir tane daha oluştuğunu görebilirsiniz.


:not(seçici)

Bu şekilde oluşturulan seçicilerle parantez içine yazılan seçicinin seçeceği elemanlar dışındaki elemanlar seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Diğer Seçiciler</title>
<style>
p:not(.ornek){
    color:red;
}
</style>
</head>
<body>
    <h1>Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p class="ornek">Örnek Paragraf 2</p>
    <h1>Örnek Başlık 2</h1>
    <p>Örnek Paragraf 3</p>
    <p class="ornek">Örnek Paragraf 4</p>
</body>
</html>

Yukarıdaki örnekte "ornek" sınıfına dahil olmayan paragraflar seçilecektir. Bu seçiciyi başında eleman olmadan kullanmak beklenenden farklı sonuçlar verebilir. 

<!DOCTYPE html>
<html>
<head>
<title>CSS Diğer Seçiciler</title>
<style>
:not(p){
    color:red;
}
</style>
</head>
<body>
    <h1>Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p class="ornek">Örnek Paragraf 2</p>
    <h1>Örnek Başlık 2</h1>
    <p>Örnek Paragraf 3</p>
    <p class="ornek">Örnek Paragraf 4</p>
</body>
</html>

Yukarıdaki örnekte sadece başlıkların kırmızı olması beklenebilir. Çünkü paragraf olmayan elemanlar seçilmiştir. Fakat paragraf olmayan elemanlar arasında <body> elemanı da vardır. Bu elemanın yazı rengi biçimlendirildiğinde içerisindeki yazı rengi biçimlendirilmemiş elemanlar da bu biçimlendirmeye uyacaktır. Bu nedenle elde edilen sonuç tüm yazının kırmızı olması olacaktır.


:root

Bu seçiciyle <html> etiketleri arasındaki kısım seçilmiş olur.


*

Bu seçiciyle tüm elemanlar seçilmiş olur. Fakat sık kullanılan bir seçici değildir. Örneğin *.sinif şeklinde bir seçici oluşturmaktansa aynı anlama gelen .sinif şeklinde bir seçici oluşturmak daha çok tercih edilir.