Selector Nilai Atribut II

Pelajaran 14 dari 15 dalam kursus Selector CSS di Coddy.

Dalam pelajaran ini, kita akan menjelajahi konsep selector yang mencocokkan akhir nilai atribut. Teknik ini memungkinkan kamu menargetkan elemen HTML berdasarkan karakter terakhir dari nilai atributnya.

Sintaks Selector yang Mencocokkan Akhir Nilai Atribut:

Untuk menargetkan elemen dengan nilai atribut yang diakhiri 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 berakhiran "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

Dalam contoh kode yang diberikan:

Tiga tombol didefinisikan dengan nilai atribut class yang berbeda.
Aturan CSS [class$="-tertiary"] menargetkan elemen dengan nilai atribut class yang diakhiri "-tertiary". Aturan ini menerapkan gaya background-color: lightcoral; pada tombol-tombol tersebut.

Hasilnya, tombol dengan nilai atribut class "btn-tertiary" akan memiliki warna latar belakang light coral.

Tantangan

Mudah

Kamu diberi daftar trek musik di halaman web. Setiap trek diwakili oleh elemen <div> dengan atribut data-track yang menunjukkan formatnya (misalnya, "mp3", "wav", "flac"). Tugasmu adalah memberi gaya berbeda pada trek berdasarkan formatnya menggunakan selektor yang mencocokkan akhiran nilai atribut.

Tugas CSS-mu adalah:

Berikan latar belakang unik pada trek dengan nilai atribut data-track yang diakhiri dengan "mp3".
Berikan latar belakang unik pada trek dengan nilai atribut data-track yang diakhiri dengan "wav".
Berikan latar belakang unik pada trek dengan nilai atribut data-track yang diakhiri dengan "flac".

Coba sendiri

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

Semua pelajaran di Selector CSS

1Pengenalan CSS Selectors

Tujuan CSS Selectors Mengapa penting?

4Selector Atribut

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