CSS

Attr Selektor di CSS: Contoh Code & Cara Membuatnya

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-xhr="#" 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”

Hanifah Nurbaeti

Share
Tags: CSS