MulaiCode
CSS

CSS Attribute Selectors

Pelajari cara memilih elemen HTML berdasarkan atributnya menggunakan CSS.

CSS Attribute Selectors

CSS Attribute Selectors digunakan untuk menargetkan elemen berdasarkan atribut atau nilai atribut tertentu.


Contoh Dasar Attribute Selector

<style>
  /* Memilih semua elemen a dengan atribut target */
  a[target] {
    background-color: yellow;
  }
 
  /* Memilih elemen a dengan target="_blank" */
  a[target="_blank"] {
    color: red;
  }
 
  /* Memilih semua input bertipe text */
  input[type="text"] {
    border: 2px solid blue;
  }
</style>
 
<a href="https://mulaicode.com" target="_blank">Link Baru</a>
<a href="https://mulaicode.com">Link Biasa</a>
 
<br /><br />
 
<input type="text" placeholder="Text Input" />
<input type="password" placeholder="Password Input" />

Tipe-Tipe Attribute Selector

SelectorContohDeskripsi
[attr][target]Memilih elemen dengan atribut tertentu.
[attr="value"][type="text"]Memilih elemen dengan atribut bernilai tertentu.
[attr~="value"][title~="flower"]Memilih elemen dengan atribut yang berisi kata tertentu.
[attr="value"][lang="en"]Memilih elemen dengan atribut bernilai tepat atau diawali dengan nilai tertentu diikuti tanda -.
[attr^="value"][href^="https"]Memilih elemen dengan atribut yang diawali dengan nilai tertentu.
[attr$="value"][href$=".pdf"]Memilih elemen dengan atribut yang diakhiri dengan nilai tertentu.
[attr*="value"][href*="example"]Memilih elemen dengan atribut yang mengandung nilai tertentu.

On this page