6.1 Atribut Selektorlarının Növləri
CSS-də atribut selektorları atributların mövcudluğuna, onların dəyərlərinə və ya dəyər parçalarına əsaslanaraq elementləri seçməyə imkan verir. Onlar HTML elementlərinin stilizasiyası üçün çevik və güclü imkanlar təqdim edir ki, bu da onları dinamik məzmun və interaktiv veb-səhifələrlə işləmək üçün xüsusilə faydalı edir.
Atribut selektorlarının növləri
- Atribut Selektoru (Attribute Selector)
- Dəyər ilə Atribut Selektoru (Attribute Selector with Value)
- Başlanğıc dəyəri ilə Atribut Selektoru (Attribute Selector with Prefix)
- Son dəyəri ilə Atribut Selektoru (Attribute Selector with Suffix)
- Alt dəyəri ilə Atribut Selektoru (Attribute Selector with Substring)
- Boşluqla ayrılmış məzmunlu Atribut Selektoru (Attribute Selector with Whitespace)
- Tire ilə ayrılmış məzmunlu Atribut Selektoru (Attribute Selector with Hyphen)
6.2 Atribut seçicisi
Atribut seçicisi belirtilmiş atributa sahib olan elementləri, dəyərindən asılı olmayaraq seçir.
Sintaksis:
[atribut] {
xüsusiyyət: dəyər;
xüsusiyyət: dəyər;
}
Nümunə:
/* title atributuna sahib olan bütün elementləri seçir */
[title] {
color: blue;
}
<p title="Bu başlıqdır">Bu mətn mavi olacaq.</p>
<p>Bu mətn mavi olmayacaq.</p>
6.3 Atributun dəyəri ilə selektor
Atributun dəyəri ilə selektor elementləri seçir, atributlarının müəyyən edilmiş dəyəri olan.
Sintaksis:
[atribut="dəyər"] {
xassə: dəyər;
xassə: dəyər;
}
Nümunə:
/* Tüm elementləri seçir, hansılar ki, atribut title dəyər "Nümunə" var */
[title="Nümunə"] {
color: green;
}
<p title="Nümunə">Bu mətn yaşıl olacaq.</p>
<p title="Başqa nümunə">Bu mətn yaşıl olmayacaq.</p>
6.4 Atribut seçicisi, dəyəri prefiks ilə olan
Başlanğıc dəyəri olan atribut seçicisi, atributları göstərilən dəyərlə başlayan elementləri seçir.
Sintaksis:
[atribut^="dəyər"] {
xüsusiyyət: dəyər;
xüsusiyyət: dəyər;
}
Nümunə:
/* title atributu "Başlamaq" ilə başlayan bütün elementləri seçir */
[title^="Başlamaq"] {
color: red;
}
<p title="Başlamaq mətn">Bu mətn qırmızı olacaq.</p>
<p title="Başlanğıc deyil">Bu mətn qırmızı olmayacaq.</p>
6.5 Atribut selektoru, dəyəri sonlu olan
Sonlu dəyəri olan atribut selektoru, atributları göstərilən dəyərlə bitən elementləri seçir.
Syntax:
[atribut$="dəyər"] {
xüsusiyyət: dəyər;
xüsusiyyət: dəyər;
}
Nümunə:
/* title atributu "sonluq" ilə bitən bütün elementləri seçir */
[title$="sonluq"] {
color: orange;
}
<p title="Bu sonluqdur">Bu mətn narıncı olacaq.</p>
<p title="Bu başlanğıcdır">Bu mətn narıncı olmayacaq.</p>
6.6 Atribut dəyəri-alt sətiri olan selektor
Atribut dəyəri olan selektor verilən dəyəri ehtiva edən atributa malik elementləri seçir.
Sintaksis:
[atribut*="dəyər"] {
xassə: dəyər;
xassə: dəyər;
}
Nümunə:
/* title atributu "ortası" sözünü ehtiva edən bütün elementləri seçir */
[title*="ortası"] {
color: purple;
}
<p title="Bu mətnin ortasıdır">Bu mətn bənövşəyi olacaq.</p>
<p title="Burada orta yoxdur">Bu mətn bənövşəyi olmayacaq.</p>
6.7 Boşluq-ayırıcı ilə Atribut Selektoru
Boşluq-ayırıcı ilə atribut selektoru, atributunda bir və ya bir neçə boşluqla ayrılmış dəyərləri olan elementləri seçir. Müəyyən siniflərə və ya rollara malik elementləri seçmək üçün faydalıdır.
Syntax:
[atribut~="dəyər"] {
xassə: dəyər;
xassə: dəyər;
}
Nümunə:
/* Atributunda class siyahısında "highlight" olan bütün elementləri seçir */
[class~="highlight"] {
background-color: yellow;
}
<p class="highlight special">Bu mətn sarı fon ilə olacaq.</p>
<p class="special highlight">Bu mətn də sarı fon ilə olacaq.</p>
<p class="special">Bu mətn sarı fon ilə olmayacaq.</p>
6.8 Atribut seçici ilə defis ayrıcı
Defisə görə ayrılmış atribut seçicisi, atributu göstərilən dəyəri ehtiva edən və ya həmin dəyər ilə başlayan, sonra isə defis gələn elementləri seçir.
Sintaksis:
[atribut|="dəyər"] {
xüsusiyyət: dəyər;
xüsusiyyət: dəyər;
}
Nümunə:
p[lang|="ru"] {
font-style: italic;
}
<p lang="ru">Bu mətn kursiv olacaq.</p>
<p lang="ru-RU">Bu mətn də kursiv olacaq.</p>
<p lang="en">Bu mətn kursiv olmayacaq.</p>
GO TO FULL VERSION