Home » CSS » Attr Selektor di CSS: Contoh Code & Cara Membuatnya

Attr Selektor di CSS: Contoh Code & Cara Membuatnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Elemen Style HTML Dengan Atribut Tertentu

Elemen Style HTML yang dapat memberikan style pada elemen HTML yang memiliki atribut atau nilai atribut tertentu.

Selektor [atribut] di CSS

Selektor [attribute] digunakan untuk memilih elemen dengan atribut tertentu.

Contoh berikut memilih semua elemen dengan atribut target:

Contoh :

a[target] {
  background-color: yellow;
}

Selektor [atribut = “nilai”] di CSS

Selektor [atribut = “nilai”] digunakan untuk memilih elemen dengan atribut dan nilai tertentu.

Contoh berikut memilih semua elemen <a> dengan atribut target = “_ blank”:

Contoh :

a[target="_blank"] {
  background-color: yellow;
}

Selektor [atribut ~ = “nilai”] di CSS

Selektor [atribut ~ = “nilai”] digunakan untuk memilih elemen dengan nilai atribut yang berisi kata tertentu.

Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan oleh spasi, misalnya “bunga”:

Contoh :

[title~="flower"] {
  border: 5px solid yellow;
}

Contoh di atas akan mencocokkan elemen dengan title = “flower”, title = “summer flower”, dan title = “flower new“, tetapi tidak title = “my-flower” atau title = “flowers”.

Selektor [atribut | = “nilai”] di CSS

Selektor [atribut | = “nilai”] digunakan untuk memilih elemen dengan atribut yang ditentukan dimulai dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top”:

Catatan: Nilai harus berupa kata utuh baik sendiri, seperti class = “top”, atau diikuti dengan tanda hubung (-), seperti class = “top-text”!

Contoh :

[class|="top"] {
  background: yellow;
}

Selektor [atribut ^ = “nilai”] di CSS

Selektor [atribut ^ = “nilai”] digunakan untuk memilih elemen yang nilai atributnya dimulai dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top”:

Catatan: Nilainya tidak harus seluruh kata!

Contoh :

[class^="top"] {
  background: yellow;
}

Selektor [atribut $ = “value”] di CSS

Selektor [atribut $ = “nilai”] digunakan untuk memilih elemen yang nilai atributnya diakhiri dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang diakhiri dengan “test”:

Catatan: Nilainya tidak harus seluruh kata!

Contoh :

[class$="test"] {
  background: yellow;
}

Selektor [atribut * = “nilai”] di CSS

Selektor [atribut * = “nilai”] digunakan untuk memilih elemen yang nilai atributnya berisi nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berisi “te”:

Catatan: Nilainya tidak harus seluruh kata!

Contoh :

[class*="te"] {
  background: yellow;
}

Styling Forms

Atribut selektor bisa digunakan untuk style form tanpa kelas atau ID:

Contoh :

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Paulus" size="20">
  Lastname:<input type="text" name="Name" value="Partohap" size="20">
  <input type="button" value="Example Button">
</form>

</body>
</html>

Atribut Selektor di CSS

SelektorContohDeskripsi contoh
[attribute][target]Memilih semua elemen dengan atribut target
[attribute=value][target=_blank]Memilih semua elemen dengan target = “_ blank”
[attribute~=value][title~=flower]Memilih semua elemen dengan atribut judul yang mengandung kata “bunga”
[attribute|=value][lang|=en]Memilih semua elemen dengan nilai atribut lang dimulai dengan “en”
[attribute^=value]a[href^=”https”]Memilih setiap elemen <a> yang nilai atribut hrefnya dimulai dengan “https”
[attribute$=value]a[href$=”.pdf”]Memilih setiap elemen <a> yang nilai atribut hrefnya diakhiri dengan “.pdf”
[attribute*=value]a[href*=”DosenIT”]Memilih setiap elemen <a> yang nilai atribut hrefnya berisi substring “DosenIT”

You may also like