Selector Nilai Atribut

Pelajaran 13 dari 15 dalam kursus Selector CSS di Coddy.

Dalam pelajaran ini, kamu akan mempelajari konsep selector yang mencocokkan nilai atribut berdasarkan karakter awalnya. Teknik ini memungkinkan kamu menargetkan elemen HTML berdasarkan karakter awal nilai atributnya.

Sintaks Selector Berdasarkan Karakter Awal Nilai Atribut:

Untuk menargetkan elemen dengan nilai atribut yang diawali string tertentu, gunakan sintaks selector [attribute^="value"].

Contoh Kode:

HTML:

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

CSS:

/* Memilih tombol dengan nilai atribut class yang diawali "btn-" */
[class^="btn-"] {
   background-color: lightgray;
}

Dalam contoh kode yang diberikan:

Tiga tombol didefinisikan dengan nilai atribut class yang berbeda.
Aturan CSS [class^="btn-"] menargetkan elemen dengan nilai atribut class yang diawali "btn-". Aturan ini menerapkan gaya background-color: lightgray; pada tombol-tombol tersebut.

Hasilnya, ketiga tombol akan memiliki warna latar belakang abu-abu muda karena nilai atribut class-nya diawali "btn-".

Tantangan

Mudah

Bayangkan kamu memiliki struktur HTML berikut untuk sebuah list item. Tujuanmu adalah memberi style pada list item dengan nilai atribut data-category tertentu yang diawali dengan "fruit-". Terapkan warna latar belakang unik pada list item ini menggunakan CSS.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Value Starting With Selector</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <ul>
        <li data-category="fruit-apple">Apple</li>
        <li data-category="vegetable-carrot">Carrot</li>
        <li data-category="fruit-banana">Banana</li>
        <li data-category="fruit-orange">Orange</li>
        <li data-category="grain-rice">Rice</li>
    </ul>
</body>
</html>

Semua pelajaran di Selector CSS

1Pengenalan CSS Selectors

Tujuan CSS Selectors Mengapa penting?

4Selector Atribut

Pengantar Selector Atribut Keberadaan dan Nilai TepatSelector Nilai AtributSelector Nilai Atribut II Selector 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