Pemilih Atribut CSS

为带有特定属性的 HTML 元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

Pemilih [attribute] CSS

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素；

Contoh

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

Coba sendiri

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素：

Contoh

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

Coba sendiri

CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 "flower" 单词的所有元素：

Contoh

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

Coba sendiri

上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

Contoh di bawah ini memilih semua elemen yang properti class dimulai dengan "top":

注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

Contoh

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

Coba sendiri

Pemilih CSS [attribute^="value"]

Pemilih [attribute^="value"] digunakan untuk memilih elemen yang properti dimulai dengan nilai yang ditentukan.

Contoh di bawah ini memilih semua elemen yang properti class dimulai dengan "top":

Petunjuk:Nilai tidak harus adalah kata lengkap!

Contoh

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

Coba sendiri

Pemilih CSS [attribute$="value"]

Pemilih [attribute$="value"] digunakan untuk memilih elemen yang properti berakhir dengan nilai yang ditentukan.

Contoh di bawah ini memilih semua elemen yang properti class berakhir dengan "test":

Petunjuk:Nilai tidak harus adalah kata lengkap!

Contoh

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

Coba sendiri

Pemilih CSS [attribute*="value"]

Pemilih [attribute*="value"] memilih elemen yang properti nilai mengandung kata yang ditentukan.

Contoh di bawah ini memilih semua elemen yang properti class mengandung "te":

Petunjuk:Nilai tidak harus adalah kata lengkap!

Contoh

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

Coba sendiri

Atur gaya formulir

Jika perlu menata gaya formulir tanpa class atau id, pemilih properti akan sangat berguna:

Contoh

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

Coba sendiri

Petunjuk:Buka halaman kami Tutorial CSS Form，Belajar lebih lanjut tentang bagaimana menggunakan CSS untuk menata gaya formulir.

Semua pemilih CSS properti

Pemilih Contoh Deskripsi contoh
[attribute] [target] Pilih semua elemen yang memiliki properti target.
[attribute=value] [target=_blank] Pilih semua elemen yang memiliki properti target="_blank".
[attribute~=value] [title~=flower] Pilih semua elemen yang memiliki properti title yang mengandung kata "flower".
[attribute|=value] [lang|=en] Pilih semua elemen yang memiliki properti lang yang dimulai dengan "en".
[attribute^=value] a[href^="https"] Pilih setiap elemen <a> yang href properti dimulai dengan "https".
[attribute$=value] a[href$=".pdf"] Pilih setiap elemen <a> yang href properti berakhir dengan ".pdf".
[attribute*=value] a[href*="codew3c"] Pilih setiap elemen <a> yang mengandungi substring "codew3c" dalam atribut href.

Bacaan Tambahan

Buku Tambahan:Pemilih Attribut CSS