CSS-də atribut seçiciləri

1. Atribut seçicilərin növləri

CSS-də atribut seçicilər HTML elementlərini onların atributlarının, məsələn, id, class, name, type və s. dəyərlərinə əsaslanaraq seçməyə imkan verir. Onlar elementləri seçməkdə elastiklik və dəqiqlik təmin edir, xüsusilə də form elementlərinin, keçidlərin və unikal atributları olan digər elementlərin stilləşdirilməsi üçün faydalıdır. Bu məqalədə müxtəlif atribut seçicilərinə və onların tətbiqinə baxacağıq.

Atribut seçicilər bir neçə kateqoriyalara bölünür, bunlar atributun mövcudluğuna, onun tam dəyərinə və ya bir hissəsinə əsaslanaraq elementləri seçməyə imkan verir. Əsas atribut seçici növləri:

1. Atribut seçici: atribut dəyərindən asılı olmayaraq, müəyyən atributa malik olan elementləri seçir.
2. Qiymətə malik atribut seçici: müəyyən dəyərə bərabər olan atributa malik elementləri seçir.
3. Başlanğıc dəyəri olan atribut seçici: atribut dəyərinin müəyyən bir prefiks ilə başladığı elementləri seçir.
4. Son dəyəri olan atribut seçici: atribut dəyərinin müəyyən bir suffiks ilə bitdiyi elementləri seçir.
5. Əhatə edən atribut seçici: atribut dəyərində müəyyən bir alt-sətir olan elementləri seçir.
6. Boşluqla ayrılmış atribut seçici: atribut dəyərində boşluqlarla ayrılmış müəyyən bir sözü olan elementləri seçir.
7. Tire ilə ayrılmış atribut seçici: atribut dəyərində tire ilə ayrılmış müəyyən bir sözü olan elementləri seçir.

2. Atribut seçici (Attribute Selector)

Atribut seçici müəyyən bir atributun olub-olmamasından asılı olmayaraq, həmin atributa malik elementləri seçir. Bu seçici, bizə konkret bir atributu olan bütün elementləri seçməyə ehtiyacımız olduqda faydalıdır.

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

Bu nümunədə, bütün <input> elementlərinin type atributu varsa, həmin elementlər atribut dəyərindən asılı olmayaraq qara haşiyə alacaqlar.

3. Atribut dəyəri ilə seçici

Atribut dəyəri ilə seçici müəyyən atributu müəyyən dəyərə bərabər olan elementləri seçir. Bu, məsələn, bütün mətn sahələrini və ya yeni bir tabda açılan keçidləri seçmək lazım olduqda faydalıdır.

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Burada yalnız mətn sahəsi <input type="text"> açıq boz fon alacaq.

4. Başlanğıc dəyərə malik atribut selektoru

Başlanğıc dəyərə malik atribut selektoru, atributun dəyəri müəyyən bir prefiks ilə başlayan elementləri seçir. Prefiks ^= simvolundan sonra göstərilir. Məsələn, bu selektor müəyyən bir sayta aparan bütün linkləri seçmək üçün faydalıdır.

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">example.com saytına keçid</a>
<a href="https://another.com">Başqa keçid</a>
    
  

Yalnız birinci keçid yaşıl rəngə boyanacaq, çünki o "https://example.com" ilə başlayır.

5. Atributun son dəyərinə görə seçici

Atributun son dəyərinə görə seçici, atributun dəyəri müəyyən bir sonluqla bitən elementləri seçir. Sonuncu dəyər $= simvolundan sonra göstərilir. Bu seçici, məsələn, .png formatında olan şəkillər kimi müəyyən bir tipdəki faylları seçmək üçün faydalıdır.

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Şəkil 1">
<img src="image2.jpg" alt="Şəkil 2">
    
  

Burada yalnız .png genişlənməsinə sahib olan şəkil mavi çərçivə ala bilər.

6. Dəyəri özündə saxlayan atribut seçici

Dəyəri özündə saxlayan atribut seçici, atributun dəyəri daxilində müəyyən bir alt sətir olan elementləri seçir. Alt sətir *= simvolundan sonra müəyyən edilir. Bu seçici, atributunun dəyərində konkret bir hissə olan elementləri - məsələn, saytın müəyyən bir bölməsinə keçidləri seçmək lazım olduqda istifadə olunur.

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">Bölmə 1 üçün keçid</a>
<a href="https://example.com/about">Haqqımızda</a>
<a href="https://example.com/section2">Bölmə 2 üçün keçid</a>
    
  

Yalnız "section" özündə saxlayan href-i olan keçidlər qalın şriftlə seçiləcək.

7. Boşluqla Ayrılmış Atribut Selektoru

Boşluqla ayrılmış atribut selektoru, atributun dəyərində göstərilən sözü ehtiva edən elementləri seçir. Bu selektor üçün ~= simvolundan istifadə edilir. O, tez-tez bir neçə dəyərlə (boşluqla ayrılmış) doldurulmuş müəyyən class-ları və ya digər atributları ehtiva edən elementləri seçmək üçün istifadə olunur.

    
[class~="featured"] {
  background-color: yellow;
}
    
  

    
<div class="featured item">"featured" class-ı olan element</div>
<div class="item">Adi element</div>
<div class="highlight featured">"featured" class-ı olan başqa bir element</div>
    
  

Burada yalnız class siyahısında featured ehtiva edən elementlər sarı fon alacaq.

8. Tire ilə bölünən atribut seçicisi

Tire ilə bölünən atribut seçicisi atributunun dəyəri müəyyən dəyərdən başlayan və tire ilə tamamlanan elementləri seçir. |= simvolu göstərilən dəyərlə uyğun gələn və ya göstərilən dəyərdən başlayıb tire ilə ayrılan elementləri seçmək üçün istifadə olunur.

    
[lang|="en"] {
  color: blue;
}
    
  

    
<p lang="en">İngilis dilində mətn</p>
<p lang="en-us">İngilis dilində mətn (Amerika variantı)</p>
<p lang="fr">Fransız dilində mətn</p>
    
  

Burada mavi rənglə yalnız lang atributu "en" olan və ya "en-" ilə başlayan, məsələn, "en-us" olan elementlər rənglənəcək.

9. Müxtəlif atribut seçicilərinin istifadəsinə nümunə

Aşağıda müxtəlif atribut seçicilərinin tətbiq olunduğu bir HTML və CSS nümunəsi göstərilmişdir.

<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>CSS atribut seçicilərinə nümunə</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Mətn sahəsi">
<input type="password" placeholder="Şifrə">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">example.com-a keçid</a>
<a href="https://example.com/section2">Bölməyə keçid</a>

<img src="image.png" alt="PNG şəkli">
<img src="photo.jpg" alt="JPG şəkli">

<div class="featured item">"featured" sinifli element</div>
<div class="item">Adi element</div>
<div class="highlight featured">"featured" sinifli başqa bir element</div>

<p lang="en">İngilis dilində mətn</p>
<p lang="en-us">Amerika ingilis dilində mətn</p>
<p lang="fr">Fransız dilində mətn</p>
</body>
</html>

<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>CSS atribut seçicilərinə nümunə</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Mətn sahəsi">
<input type="password" placeholder="Şifrə">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">example.com-a keçid</a>
<a href="https://example.com/section2">Bölməyə keçid</a>

<img src="image.png" alt="PNG şəkli">
<img src="photo.jpg" alt="JPG şəkli">

<div class="featured item">"featured" sinifli element</div>
<div class="item">Adi element</div>
<div class="highlight featured">"featured" sinifli başqa bir element</div>

<p lang="en">İngilis dilində mətn</p>
<p lang="en-us">Amerika ingilis dilində mətn</p>
<p lang="fr">Fransız dilində mətn</p>
</body>
</html>

/* Atribut seçicisi */
input[type] {
  border: 1px solid black;
}

/* Məlum dəyərli atribut seçicisi */
input[type="text"] {
  background-color: #f0f0f0;
}

/* Dəyərlə başlayan atribut seçicisi */
a[href^="https://example.com"] {
  color: green;
}

/* Dəyərlə bitən atribut seçicisi */
img[src$=".png"] {
  border: 2px solid blue;
}

/* Dəyəri əhatə edən atribut seçicisi */
a[href*="section"] {
  font-weight: bold;
}

/* Boşluğun bölgüsü ilə atribut seçicisi */
[class~="featured"] {
  background-color: yellow;
}

/* Tirə ilə ayrılan atribut seçicisi */
[lang|="en"] {
  color: blue;
}