Selector Atribut


Artikel ini akan menjelaskan lebih lanjut tentang salah satu kategori selector yaitu selector atribut. Selector atribut akan mencocokkan elemen berdasarkan atribut dan nilai atributnya.

Sintaksnya secara umum diawali tanda “[” dan diakhiri dengan tanda “]”, yang berisi nama atribut diikuti dengan kondisi opsional untuk dicocokkan dengan nilai atribut.

Contoh :

<p>Daftar komik webtoon :</p>
<ul>
    <li data-genres="fantasy">Tower of God</li>
    <li data-genres="fantasy">Dice</li>
    <li data-genres="fantasy">The Gamer</li>
    <li data-genres="romance">Eggnoid</li>
    <li data-genres="comedy">Tahilalats</li>
</ul>
[data-genres] {
    margin: 5px 0;
    background-color: purple;
    color: white;
}
[data-genres="romance"] {
    background-color: pink;
}
[data-genres="comedy"] {
    background-color: orange;
}

Output :

  • Tower of God
  • Dice
  • The Gamer
  • Eggnoid
  • Tahilalats

Catatan :

[atribut]

Menunjukkan elemen – elemen dengan nama atribut.

Contoh :

<p data-paragraf>Tutorial HTML bahasa Indonesia</p>
<p class="paragraf">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf>Tutorial JavaScript bahasa Indonesia</p>
[data-paragraf] {
color: red;
}

Output :

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia

 

[atribut=”nilai atribut”]

Menunjukkan elemen-elemen dengan nama atribut beserta nilai atributnya.

Contoh :

<p data-paragraf>Tutorial HTML bahasa Indonesia</p>
<p class="paragraf">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf>Tutorial JavaScript bahasa Indonesia</p>
[class="paragraf"] {
    font-family: cursive;
}

Output :

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia

 

[atribut~=”nilai atribut”]

Menunjukkan elemen-elemen yang mengandung kata dari nilai atribut yang dipisahkan oleh spasi. Namun bukan nilai atribut tersebut.

Contoh :

<p data-paragraf="bahasa indonesia">MACode Indonesia – Tutorial HTML, CSS, dan JavaScript</p>
<p data-paragraf="bahasa">Tutorial HTML bahasa Indonesia</p>
<p class="paragraf">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf>Tutorial JavaScript bahasa Indonesia</p>
[data-paragraf~="bahasa"] {
    background-color: yellow;
}

Output :

MACode Indonesia – Tutorial HTML, CSS, dan JavaScript

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia

 

[atribut|=”nilai atribut”]

Menunjukkan elemen-elemen dengan nilai atribut tersebut atau nilai atribut yang diikuti oleh tanda “-“.Dengan catatan tidak ada kata / huruf lain sebelum  nilai atributnya (nilai utama).

Contoh :

<p data-paragraf="bahasa indonesia">MACode Indonesia – Tutorial HTML, CSS, dan JavaScript</p>
<p data-paragraf="bahasa">Tutorial HTML bahasa Indonesia</p>
<p data-paragraf="css bahasa-pemrograman">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf="bahasa-pemrograman">Tutorial JavaScript bahasa Indonesia</p>
[data-paragraf|="bahasa"] {
    background-color: yellow;
}

Output :

MACode Indonesia – Tutorial HTML, CSS, dan JavaScript

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia

 

[atribut^=”nilai atribut”]

Menunjukkan elemen-elemen yang mengandung kata dari nilai atribut tersebut, meskipun dipisahkan oleh spasi atau tanda “-” (tidak harus sesuai dengan nilai atribut). Dengan catatan tidak ada kata / huruf lain sebelum  nilai atributnya (nilai utama).

Contoh :

<p data-paragraf="bahasa indonesia">MACode Indonesia – Tutorial HTML, CSS, dan JavaScript</p>
<p data-paragraf="bahasa">Tutorial HTML bahasa Indonesia</p>
<p data-paragraf="css bahasa-pemrograman">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf="bahasa-pemrograman">Tutorial JavaScript bahasa Indonesia</p>
[data-paragraf^="bahasa"] {
    background-color: yellow;
}

Output :

MACode Indonesia – Tutorial HTML, CSS, dan JavaScript

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia

 

[atribut$=”nilai atribut”]

Menunjukkan elemen – elemen yang menangandung kata dari nilai atribut tersebut, namun nilai atributnya adalah kata / huruf terakhir (nilai terakhir). Tidak ada kata / huruf lagi setelah nilai atribut tersebut, kecuali di depan nilai atribut.

Contoh :

<p data-paragraf="bahasa">MACode Indonesia – Tutorial HTML, CSS, dan JavaScript</p>
<p data-paragraf="html bahasa indo">Tutorial HTML bahasa Indonesia</p>
<p data-paragraf="css bahasa">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf="bahasa-pemrograman">Tutorial JavaScript bahasa Indonesia</p>
[data-paragraf$="bahasa"] {
    background-color: yellow;
}

Output :

MACode Indonesia – Tutorial HTML, CSS, dan JavaScript

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia

 

[atribut*=”nilai atribut”]

Menunjukkan elemen-elemen yang mengandung kata dari nilai atribut tersebut.

Contoh :

<p data-paragraf="bahasa">MACode Indonesia – Tutorial HTML, CSS, dan JavaScript</p>
<p data-paragraf="html bahasa indo">Tutorial HTML bahasa Indonesia</p>
<p data-paragraf="css bahasa">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf="bahasa indonesia">Tutorial JavaScript bahasa Indonesia</p>
[data-paragraf*="indo"] {
    background-color: yellow;
}

Output :

MACode Indonesia – Tutorial HTML, CSS, dan JavaScript

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia

 

[atribut=”nilai atribut” i]

Membuat nilai atribut yang ditunjuk menjadi case-insensitive (huruf besar dan huruf kecil tidak dibedakan).

Contoh :

<p data-paragraf="BAHASA">Tutorial HTML bahasa Indonesia</p>
<p data-paragraf="BaHasA">Tutorial CSS bahasa Indonesia</p>
<p data-paragraf="bahasA">Tutorial JavaScript bahasa Indonesia</p>
[data-paragraf="bahasa" i] {
    background-color: yellow;
}

Output :

MACode Indonesia – Tutorial HTML, CSS, dan JavaScript

Tutorial HTML bahasa Indonesia

Tutorial CSS bahasa Indonesia

Tutorial JavaScript bahasa Indonesia