Selector Nilai Atribut III

Pelajaran 15 dari 15 dalam kursus Selector CSS di Coddy.

Dalam pelajaran ini, kita akan mempelajari konsep selector yang mencocokkan nilai atribut berdasarkan teks yang dikandungnya. Teknik ini memungkinkan kamu memilih elemen HTML berdasarkan apakah nilai atributnya mengandung substring tertentu.

Sintaks Selector yang Mencocokkan Nilai Atribut:

Untuk memilih elemen dengan nilai atribut yang mengandung string tertentu, gunakan sintaks selector [attribute*="value"].

Contoh Kode:

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:

/* Memilih elemen <div> dengan nilai atribut class yang mengandung "fruit" */
[class*="fruit"] {
   color: green;
}

Penjelasan Contoh Kode:

Dalam contoh kode yang diberikan:

Lima elemen <div> didefinisikan dengan nilai atribut class yang berbeda.
Aturan CSS [class*="fruit"] memilih elemen dengan nilai atribut class yang mengandung substring "fruit". Aturan ini menerapkan gaya color: green; pada elemen-elemen tersebut.

Hasilnya, elemen <div<strong>></strong> dengan atribut class "tag fruit" akan memiliki warna teks hijau.

Tantangan

Mudah

Kamu diminta memberi gaya pada daftar produk di halaman web. Setiap produk direpresentasikan oleh elemen <div> dengan atribut data-tags yang menunjukkan tagnya (misalnya, "electronics", "clothing", "accessories"). Tujuanmu adalah memberi gaya yang berbeda pada produk berdasarkan tag-nya menggunakan selector yang mencocokkan nilai atribut.

Tugas CSS-mu adalah:

Berikan warna latar belakang yang unik pada produk dengan atribut data-tags yang berisi "electronics".
Berikan garis tepi yang unik pada produk dengan atribut data-tags yang berisi "clothing".
Berikan warna latar belakang yang unik pada produk dengan atribut data-tags yang berisi "accessories".

Coba sendiri

<!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>

Semua pelajaran di Selector CSS

1Pengenalan CSS Selectors

Tujuan CSS Selectors Mengapa penting?

4Selector Atribut

Pengantar Selector Atribut Keberadaan dan Nilai Tepat Selector Nilai Atribut Selector Nilai Atribut IISelector Nilai Atribut III

2Selektor Sederhana

Selektor tipe Selektor class Selektor ID Selektor universal

3Selector Kombinator

Selector anak Selector keturunan Selector saudara berdekatan Selector saudara umum

Latihan sendiri: Playground Web