Xüsusiyyət seçiciləri (Attribute Selectors)

CSS ilə təyin etmə zamanı Html obyektlərinə çatmada bəzən çətinlik çəkirik. Xüsusiyyət Seçiciləri bu problemi kökündən həll edən bir üsuldur .

Xüsusiyyət Seçiciləri HTML, XHTML və ya XML sənədlərindəki seçilən etiketin xüsusiyyətlərinə və ya xüsusiyyət dəyərlərinə görə dəyişiklikliyi təmin edir. Məsələn: səhifəmizdəki bir şəkilə (nümunə: qrafik.gif) kənarlıq (border) əlavə etmək istəsək:
img[src="qrafik.gif"]{ 
    border: 1px solid #000; 
}
Dörd növ Xüsusiyyət Seçicisi vardır.
 
1- Sadə Xüsusiyyət Seçicisi
Müəyyən bir etiketin (məs: img) xüsusiyyətinə (məs: alt) görə dəyişiklik etməyimizi təmin edir.

  

Bir nümunə hazırlayaq
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>CSS-in strukturu</title>
<style type="text/css">
img[alt] {
    border: 5px solid lime
}
</style>
</head>
<body>
    <img src="http://xpert.az/uploads/posts/2014-07/1404277079_range-rover.jpg" alt="Logo" width="500" height="375" />
</body>
</html>
Nəticəni görmək üçün klikləyin
 
Yuxarıdakı kodlaşdırmada biz yalnız alt əlavəsi etdiklərimizə müəyyən xüsusiyyətlər təyin etmək istəyirik. Bunun üçün Sadə Xüsusiyyət Seçicisini istifadə etmiş oluruq
 
2- Xüsusiyyət Dəyəri Seçicisi
Bir etiketin xüsusiyyət dəyərinə dəyişiklik etməyimizi təmin edir.
 

Xüsusiyyət Dəyəri Seçicisi

 
Bir nümunəyə baxaq
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS strukturu</title>
<style type="text/css">
input[type="text"] {
border: 1px solid #000;
width: 150px;
}
</style>
</head>
<body>
<p>Adınız : <input type="text" name="ad" /></p>
<p>Cinsiyyətiniz: <input type="radio" name="cinsiyyet" id="kisi" />
Kişi <input type="radio" name="cinsiyyet" id="qadin" /> Qadın
</p>
</body>
</html>
Nəticəni görmək üçün klikləyin
 
Ümumiyyətlə form-larda dəyişiklik edərkən yalnız mətn girişi olan sahələrə üçün dəyişiklik etməkdə çətinlik çəkirik. Bunun səbəbi <input> etiketini yalnız mətn girisi üçün istifadə edilməməsidir, radio, düymə və isarələmə qutuları içində bu etiket istifadə olunur. Xüsusiyyət Dəyəri Seçicisi bu problemi kökündən həll edir. Yuxarıdakı nümunədə göründüyü kimi
 
3- Qismi Xüsusiyyət Dəyəri Seçicisi
Bir etiketin xüsusiyyət dəyərindəki boşluqlarla ayrılmış qisimlərinə görə dəyişiklik etməyimizi təmin edir.
 

Qismi Xüsusiyyət Dəyəri Seçicisi

 
Bir nümunəyə baxaq
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS strukturu</title>
<style type="text/css">
a[title~="Google"] {
text-decoration:overline;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle</a></p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo</a></p>
<p><a href="http://www.xpert.az" title="Xpert">xpert</a></p>
</body>
</html>
Nəticəni görmək üçün klikləyin

Bizim öz hərflərimizdə də (ə, ç, ğ...) problemsiz işləyir
 
Diqqətə Dəyər Xüsusiyyət Seçicisi
Bir etiketin xüsusiyyət dəyərindəki kəsik xət t(-) ilə ayrılmış qisimlərinə görə dəyişiklik etməyimizi təmin edir.
 

Diqqətə Dəyər Xüsusiyyət Seçicisi

 
Bir nümunəyə baxaq
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS strukturu</title>
<style type="text/css">
*[lang|="en"] {
color: red;
}
</style>
</head>
<body>
<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G’day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
</body>
</html>
Nəticəni görmək üçün klikləyin
 
Bunlardan başqa CSS3 ilə birlikdə gələn dörd yeni Xüsusiyyət Seçicisi vardır. Məqsəd CSS və HTML arasındakı əlaqəni ən üst səviyyəyə çıxararaq asan və effektiv kod yazmaqdır.
CSS3