Öznitelik Değeri seçicileri II

Coddy'nin CSS Seçicileri kursunda ders 14 / 15.

Bu derste, öznitelik değeri ile biten seçiciler kavramını keşfedeceğiz. Bu teknik, HTML öğelerini öznitelik değerlerinin son karakterlerine göre hedeflemenize olanak tanır.

Öznitelik Değeri ile Biten Seçici Sözdizimi:

Öznitelik değerleri belirli bir dize ile biten öğeleri hedeflemek için [attribute$="value"] seçici sözdizimini kullanırsınız.

Kod Örnekleri:

HTML:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>

CSS:

/* Sınıf öznitelik değerleri "-tertiary" ile biten düğmeleri seçer */
[class$="-tertiary"] {
   background-color: lightcoral;
}

Sağlanan kod örneklerinde:

Farklı sınıf öznitelik değerlerine sahip üç düğme tanımlanmıştır.
[class$="-tertiary"] CSS kuralı, "-tertiary" ile biten bir class öznitelik değerine sahip öğeleri hedefler. Bu düğmelere background-color: lightcoral; stilini uygular.

Sonuç olarak, "btn-tertiary" sınıf öznitelik değerine sahip düğmenin arka plan rengi açık mercan (light coral) olacaktır.

Görev

Kolay

Bir web sayfasında size müzik parçalarının bir listesi verildi. Her parça, formatını belirten bir data-track özniteliğine (örneğin, "mp3", "wav", "flac") sahip bir <div> öğesi ile temsil edilir. Göreviniz, öznitelik değeri sonu seçicilerini kullanarak parçaları formatlarına göre farklı şekilde stillendirmektir.

CSS göreviniz şunları yapmaktır:

data-track öznitelik değeri "mp3" ile biten parçalara benzersiz bir arka plan verin.
data-track öznitelik değeri "wav" ile biten parçalara benzersiz bir arka plan verin.
data-track öznitelik değeri "flac" ile biten parçalara benzersiz bir arka plan verin.

Kendin dene

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Tracks</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-track="a-mp3">Track 1 (MP3)</div>
    <div data-track="a-wav">Track 2 (WAV)</div>
    <div data-track="a-flac">Track 3 (FLAC)</div>
    <div data-track="b-mp3">Track 4 (MP3)</div>
</body>
</html>

CSS Seçicileri bölümündeki tüm dersler

1CSS Seçicilerine Giriş

CSS Seçicilerinin Amacı Neden önemliler?

4Öznitelik seçiciler

Öznitelik Seçicilere Giriş Varlık ve Tam Değerler Öznitelik Değeri seçicileriÖznitelik Değeri seçicileri IIÖznitelik Değeri seçicileri III

2Basit Seçiciler

Tür seçiciler Sınıf seçiciler ID seçiciler Evrensel seçiciler

3Birleştirici Seçiciler

Çocuk seçici Torun seçici Bitişik kardeş seçici Genel kardeş seçici