Keberadaan dan Nilai Tepat

Pelajaran 12 dari 15 dalam kursus Selector CSS di Coddy.

Dalam pelajaran ini, kamu akan mempelajari selector keberadaan atribut dan nilai persis. Selector atribut digunakan untuk memilih elemen berdasarkan keberadaan atau ketiadaan suatu atribut, atau berdasarkan nilai persis suatu atribut.

Selector Keberadaan Atribut:

Selector keberadaan atribut menargetkan elemen yang memiliki atribut tertentu, terlepas dari nilainya. Selector ini ditulis dengan tanda kurung siku yang berisi nama atribut.

Contoh:

/* Memilih semua elemen yang memiliki atribut "target" */
[target] {
   color: blue;
}

Selector Nilai Persis:

Selector nilai persis menargetkan elemen dengan atribut tertentu dan nilai atribut tertentu. Selector ini ditulis dengan tanda kurung siku yang berisi nama atribut, diikuti tanda sama dengan dan nilai yang diinginkan.

Contoh:

/* Memilih elemen dengan atribut "data-type" yang bernilai "important" */
[data-type="important"] {
   font-weight: bold;
}

Contoh Kode:

HTML:

<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>

CSS:

[target] {
   text-decoration: underline;
}
[data-type="important"] {
   color: red;
}

Contoh-contoh ini menunjukkan cara kerja selector atribut CSS dengan memilih elemen berdasarkan keberadaan atau nilai persis atributnya, lalu menerapkan gaya yang sesuai pada elemen tersebut.

Tantangan

Mudah

Kamu diminta menata formulir HTML sederhana menggunakan selector atribut.

Terapkan gaya berikut menggunakan selector atribut:

Tambahkan border green ke kolom input dengan atribut type yang diatur ke "text".
Ubah warna latar belakang kolom input dengan atribut type yang diatur ke "email" menjadi lightblue.
Atur warna teks kolom input dengan atribut type yang diatur ke "password" menjadi red.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
    /* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    
    <input type="submit" value="Submit">
</form>
</body>
</html>

Semua pelajaran di Selector CSS

1Pengenalan CSS Selectors

Tujuan CSS Selectors Mengapa penting?

4Selector Atribut

Pengantar Selector AtributKeberadaan dan Nilai TepatSelector Nilai Atribut Selector 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