Wednesday, December 31, 2014

Tutorial CSS Part 22: Menggunakan Selector Atribut

Selain menggunakan selector elemen, class dan id pada CSS kita juga bisa menggunakan selector atribut. Dengan cara ini kita bisa mengatur style hanya pada elemen dengan atribut tertentu yang dipilih pada selector. Untuk menggunakan atribut pada selector kita menempatkan atribut setelah elemen dengan diapit oleh tanda [].

Kita juga bisa menambahkan nilai/value pada selector dengan beberapa operator seperti =, ~=, |= dan lainnya. Dengan cara ini kita bisa mengatur style komponen form tertentu seperti input type=text atau input type=submit.

Berikut ini beberapa cara menggunakan selector atribut pada CSS:

1. selector [atribut]

Digunakan untuk selector elemen dengan atribut tertentu.

Berikut ini contoh selector untuk elemen <a> dengan atribut target :
a[target] {
    background-color: blue;
}
Kita belajar selector [atribut] disini >>

2. selector [atribut=value]

Digunakan untuk selector elemen dengan atribut dan value tertentu.

Berikut ini contoh selector untuk elemen <input> dengan atribut "type" dengan value "text":
input[type="text"] {
    background-color: green;
}
Kita belajar selector [atribut=value] disini >>

3. selector [atribut~=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value berisi kata tertentu.

Berikut ini contoh selector untuk elemen <title> yang mempunyai value berisi kata "buku" :
[title~="buku"] {
    border: 3px solid red;
}
Contoh diatas akan mengenai elemen dengan title="buku", title="nulis buku", title="buku tulis" namun tidak untuk title="buku-saya" atau title="bukuku".

Kita belajar selector [atribut~=value] disini >>

4. selector [atribut|=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value dengan kata depan tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata depan "buku":
[class|="buku"] {
    background: red;
}
Kita belajar selector [atribut|=value] disini >>

5. selector [atribut^=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value yang diawali kata tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata "buku":
[class^="buku"] {
    background: green;
}
Kita belajar selector [atribut^=value] disini >>

6. selector [atribut$=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value yang diakhiri kata tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata "tulis":
[class$="tulis"] {
    background: blue;
}
Kita belajar selector [atribut$=value] disini >>

7. selector [atribut*=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value berisi nilai tertentu (tidak harus berupa kata).

Berikut ini contoh selector untuk elemen <title> yang mempunyai value berisi kata "bu":
[class*="bu"] {
    background: yellow;
}
Kita belajar selector [atribut*=value] disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi:

0 komentar

Post a Comment