Öznitelik Değeri seçicileri III

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

Bu derste, öznitelik değeri içeren seçiciler kavramını keşfedeceğiz. Bu teknik, HTML öğelerini öznitelik değerlerinin belirli bir alt dizeyi içerip içermediğine bağlı olarak hedeflemenize olanak tanır.

Öznitelik Değeri İçeren Seçici Sözdizimi:

Belirli bir dizeyi içeren öznitelik değerlerine sahip öğeleri hedeflemek için [attribute*="value"] seçici sözdizimini kullanırsınız.

Kod Örnekleri:

HTML:

<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>

CSS:

/* "fruit" içeren sınıf öznitelik değerlerine sahip <div> öğelerini seçer */
[class*="fruit"] {
   color: green;
}

Kod Örneklerinin Açıklaması:

Sağlanan kod örneklerinde:

Farklı sınıf öznitelik değerlerine sahip beş adet <div> öğesi tanımlanmıştır.
[class*="fruit"] CSS kuralı, "fruit" alt dizesini içeren bir class öznitelik değerine sahip öğeleri hedefler. Bu öğelere color: green; stilini uygular.

Sonuç olarak, "tag fruit" sınıf özniteliklerine sahip <div<strong>></strong> öğeleri yeşil metin rengine sahip olacaktır.

Görev

Kolay

Bir web sayfasındaki ürün listesini stillendirmekle görevlendirildiniz. Her ürün, etiketlerini belirten bir data-tags özniteliğine (örneğin, "electronics", "clothing", "accessories") sahip bir <div> öğesi ile temsil edilir. Amacınız, öznitelik değeri içeren seçicileri kullanarak ürünleri etiketlerine göre farklı şekilde stillendirmektir.

CSS göreviniz şunları yapmaktır:

data-tags özniteliği "electronics" içeren ürünlere benzersiz bir arka plan rengi verin.
data-tags özniteliği "clothing" içeren ürünlere benzersiz bir kenarlık verin.
data-tags özniteliği "accessories" içeren ürünlere benzersiz bir arka plan rengi 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>Product List</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-tags="electronics">Smartphone</div>
    <div data-tags="clothing">T-Shirt</div>
    <div data-tags="accessories">Sunglasses</div>
    <div data-tags="electronics clothing">Headphones</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