Tutorial Elektronika dan Komputer

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:

• //www.w3schools.com/css/css_attribute_selectors.asp

Pseudo elemen adalah elemen semu berupa keyword yang ditambahkan pada selector dengan tujuan untuk mengatur style dari sebagian elemen saja. Beberapa pseudo elemen hanya bisa dipakai pada elemen blok saja, seperti div dan p.

Kegunaan dari pseudo elemen diantaranya adalah untuk mengatur tampilan baris pertama sebuah paragraf atau sekedar menambahkan dekorasi image pada akhir paragraf.

Cara penulisan pseudo elemen

Untuk menuliskan pseudo elemen, kita menggunakan tanda dobel titik dua (::) diantara selector elemen dan pseudo elemen.

selector::pseudo-element {
    property:value;
}

Berikut ini beberapa pseudo elemen dan penjelasannya :

1. ::after

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada akhir elemen.

p::after {
    content: url(splitter.gif);
}

Pada contoh diatas berarti kita menambahkan gambar splitter.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::after disini >>.

2. ::before

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada awal elemen.

p::before {
    content: url(heading.gif);
}

Pada contoh diatas berarti kita menambahkan gambar heading.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::before disini >>.

3. ::first-letter

Adalah pseudo elemen yang dipakai untuk mengatur style dari huruf pertama dari text sebuah elemen. Pseudo elemen ::first-letter hanya bisa dipakai pada blok elemen saja.

p::first-letter {
    color: #0000FF;
    font-size: 20px;
}

Pada contoh diatas berarti kita menampilkan huruf pertama dari text pada paragraf dengan warna biru dengan ukuran font 20px.

Kita bisa belajar pseudo elemen ::first-letter disini >>.

4. ::first-line

Adalah pseudo elemen yang dipakai untuk mengatur style dari baris pertama pada sebuah elemen. Pseudo elemen ::first-line hanya bisa dipakai pada blok elemen saja.

p::first-line {
    color: #00FF00;
    font-variant: small-caps;
}

Pada contoh diatas berarti kita menampilkan baris pertama pada paragraf dengan warna hijau dengan varian font small-caps.

Kita bisa belajar pseudo elemen ::first-line disini >>.

5. ::selection

Adalah pseudo elemen yang dipakai untuk mengatur style dari bagian elemen yang diselect oleh user. Properti yang bisa diterapkan pada pseudo elemen ::selection adalah color, background, cursor, dan outline.

::selection {
    color: #FF0000;
    background: yellow;
}

Pada contoh diatas berarti kita mengubah tampilan obyek yang diselect oleh pengguna dengan warna merah dengan background kuning.

Kita bisa belajar pseudo elemen ::selection disini >>.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi:

• //www.w3schools.com/css/css_pseudo_elements.asp

Pseudo Class adalah keyword yang ditambahkan pada selector untuk mendefinisikan  kondisi kondisi tertentu yang terjadi pada sebuah elemen. Kondisi tersebut misalnya pada link adalah saat dikunjungi, saat ada cursor mouse diatasnya atau saat berada dalam kondisi normal.

Dalam CSS ada banyak sekali pseudo class yang bisa dipilih. Untuk menuliskan pseudo class pada sebuah selector elemen kita menggunakan tanda baca titik dua ( :), contoh a :hover adalah menunjukkans selector untuk elemen link (a) saat ada mouse diatasnya (hover).

Cara penulisan pseudo class :

selector:pseudo-class {
    property: value;
}

Contoh penggunaan pseudo class untuk elemen a :

/* link belum dikunjungi*/
a:link {
    color: #FF0000;
}

/* link sudah dikunjungi */
a:visited {
    color: #00FF00;
}

/* ada cursor mouse diatas link */
a:hover {
    color: #FF00FF;
}

/* link yang terpilih */
a:active {
    color: #0000FF;
}

Berikut ini beberapa pseudo class dan penjelasannya :

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_pseudo_classes.asp