Belajar attribute selector pada css

belajar css

Selector dengan atrribute pada css

Pada CSS Anda bisa memilih selector dengan nama atribut tertentu atau berdasarkan pada keberadaan nilai atribut tertentu. Anda bisa menggunakan selector atribut langsung dengan meletakan nama atributnya, atau Anda pun bisa meletakan nilai atribut langsung secara opsional dalam sepasang tanda kurung.

Selector [attribute]

Selector [attribute] ini paling sederhana, Anda tinggal memilih nama atribut mana yang akan dipilih. Misalnya, kita bisa memilih semua elemen yang memiliki atribut title dengan menggunakan aturan style berikut:

Contoh:

Editor Online
  1. [title] {
  2. color: green;
  3. }

Selector [attribute=”value”]

Selector [attribute="value"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya. Misalnya, kita bisa memilih semua elemen <a> yang memiliki nama atribut target dan yang mempunyai nilai atribut _ blank.

Contoh:

Editor Online
  1. a[target=”_blank”] {
  2. background-color: yellow;
  3. }

Selector [attribute~=”value”]

Selector [attribute~="value"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung kata tertentu. Misalnya, kita bisa memilih semua elemen <p> yang memiliki nama atribut class dan yang mempunyai nilai atribut yang mengandung kata bahaya.

Contoh:

Editor Online
  1. p[class~=”bahaya”] {
  2. color: white;
  3. background-color: red;
  4. }

Selector [attribute|=”value”]

Selector [attribute|="value"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung kata tertentu serta yang dipisahkan dengan tanda hubung. Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai atribut yang mengandung kata text lalu dipisahkan dengan penghubung seperti: text-pertama, kata tunggal seperti text tanpa penghubung sekali pun masih bisa diterapkan.

Contoh:

Editor Online
  1. [class|=”text”] {
  2. background-color: yellow;
  3. }

Selector [attribute^=”value”]

Selector [attribute^="value"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung nilai kata tertentu. Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai atribut yang mengandung kata nomor seperti: nomor-pertama, nomorkedua dan sebagainya. Kata tunggal seperti nomor tanpa penghubung sekali pun masih bisa diterapkan.

Contoh:

Editor Online
  1. [class^=”nomor”] {
  2. background-color: black;
  3. color: white;
  4. }

Selector [attribute$=”value”]

Selector [attribute$="value"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung nilai berakhiran kata tertentu. Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai atribut yang berakhiran kata tes seperti: paragraf-tes, tulisantes dan sebagainya. Kata tunggal seperti tes tanpa penghubung sekali pun masih bisa diterapkan.

Contoh:

Editor Online
  1. [class$=”tes”] {
  2. background-color: orange;
  3. }

Selector [attribute*=”value”]

Selector [attribute*="value"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung nilai kata atau huruf yang sudah ditentukan. Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai huruf pa seperti: paragraf-satu, paragrafdua dan sebagainya. Kata tunggal seperti pa tanpa penghubung sekali pun masih bisa diterapkan.

Contoh:

Editor Online
  1. [class*=”pa”] {
  2. background-color: yellow;
  3. font-size: 20px;
  4. }

Leave a Reply

Your email address will not be published. Required fields are marked *