Nitelik Seçicileri



[nitelik]

Bu şekilde oluşturulan seçicilerde köşeli parantezler içerisine bir nitelik yazılır. Bu niteliğe sahip tüm elemanlar seçilmiş olur.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
[id]{
color:red;
}
</style>
</head>
<body>
    <h1 id="baslik">Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p id="paragraf">Örnek Paragraf 2</p>
    <code id="kod">Örnek Kod</code>
</body>
</html>

Yukarıdaki örnekte ilk paragraf haricindeki elemanlar biçimlendirilecektir.


[nitelik=değer]

Bu şekilde oluşturulan seçicilerle belli bir niteliği belli bir değere sahip olan elemanlar seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
[lang=tr]{
color:red;
}
</style>
</head>
<body>
    <h1 lang="tr">Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p lang="tr">Örnek Paragraf 2</p>
    <code lang="en">Example Code</code>
</body>
</html>

[nitelik ~ = değer]

Bu şekilde oluşturulan seçicilerle belli bir niteliğinin değerinde belli bir kelime bulunan elemanlar seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
[id~=paragraf]{
color:red;
}
</style>
</head>
<body>
    <p id="ornek paragraf">Örnek Paragraf 1</h1>
    <p>Örnek Paragraf 2</p>
    <p id="ornekparagraf">Örnek Paragraf 3</p>
    <code id="kod">Örnek Kod</code>
</body>
</html>

Yukarıdaki örnekte şu da görülmektedir ki id niteliğinin değeri paragraf dizgisini içermesine rağmen biçimlendirilmeyecektir. Bu seçici kalıbıyla bir elemanın biçimlendirilebilmesi için değer kısmına girilen dizgi niteliğin karşısında ayrı bir kelime olarak bulunmalıdır.


[nitelik ^ = değer]

Bu şekilde oluşturulan seçicilerle belli bir nitelik içerisinde belirtilen değerle başlayan bir değer bulunan elemanlar seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
[id^=ornek]{
color:red;
}
</style>
</head>
<body>
    <p id="ornek_paragraf_1">Örnek Paragraf 1</h1>
    <p>Örnek Paragraf 2</p>
    <p id="ornekparagraf3">Örnek Paragraf 3</p>
    <code id="kod">Örnek Kod</code>
</body>
</html>

[nitelik |= değer]

Bu şekilde oluşturulan seçiciler belli bir nitelik içerisinde belirli bir değer olan ya da belirli bir dizginin sonuna "-" eklenmiş bir değerle başlayan elemanları seçmeye yarar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
[id|=ornek]{
color:red;
}
</style>
</head>
<body>
    <p id="ornek">Örnek Paragraf 1</h1>
    <p>Örnek Paragraf 2</p>
    <p id="ornek-paragraf">Örnek Paragraf 3</p>
    <code id="ornek kod">Örnek Kod</code>
</body>
</html>

Yukarıdaki örnekte biçimlendirme yapılacak elemanların id niteliği "ornek" değerine ya da "ornek-" şeklinde başlayan bir değere eşit olmalıdır. Bunu sağlayan elemanlar sadece birinci ve üçüncü paragraflardır.


[nitelik $= değer]

Bu şekilde oluşturulan seçiciler belirli bir niteliği belirli bir dizgiyle biten bir değere sahip olan elemanları seçmeye yarar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
[id$=paragraf]{
color:red;
}
</style>
</head>
<body>
    <p id="ornek">Örnek Paragraf 1</h1>
    <p id="ornekparagraf">Örnek Paragraf 2</p>
    <p id="ornek-paragraf">Örnek Paragraf 3</p>
    <code id="ornek kod">Örnek Kod</code>
</body>
</html>

[nitelik *= değer]

Bu şekilde oluşturulan seçiciler belirli bir niteliği belirli bir dizgiyi içeren bir değere sahip elemanları seçmeye yarar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
[id*=paragraf]{
color:red;
}
</style>
</head>
<body>
    <p id="paragraf">Örnek Paragraf 1</h1>
    <p id="ornekparagraf2">Örnek Paragraf 2</p>
    <p id="ornek-paragraf">Örnek Paragraf 3</p>
    <code id="ornek kod">Örnek Kod</code>
</body>
</html>

Yukarıdaki örnekte üç paragraf da biçimlendirilecektir.

Bu niteliklerin başına bir eleman türü de eklenebilir. Bu durumda belirtilen nitelik şartını sağlayanlardan sadece belirtilen türde olan elemanlar seçilir. 

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
p[lang=tr]{
color:red;
}
</style>
</head>
<body>
    <h1 lang="tr">Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p lang="tr">Örnek Paragraf 2</p>
    <code lang="en">Example Code</code>
</body>
</html>

Yukarıdaki örnekte lang niteliği tr değerine eşit olan elemanların tamamı değil sadece bu şartı sağlayan paragraflar seçilmiştir. Bu nedenl sadece ikinci paragraf biçimlendirilecek, başlık biçimlendirmeden etkilenmeyecektir.