Belajar css pseudo-classes

belajar css

Apa itu pseudo-classes ?

Pseudo-classes pada CSS sering digunakan untuk mendefinisikan keadaan khusus suatu elemen. Biasanya dikombinasikan dengan efek visual dari suatu unsur misalnya, ketika mouse pengguna diatasnya, ketika elemen mendapatkan fokus, ketika memilih penyeleksian untuk menargetkan elemen anak pertama atau terakhir dan yang lainnya. Pseudo-classes dimulai dengan titik dua ( : ) dan berikut gambaran syntax dari pseudo-classes:

selector : pseudo-classes { property : value ; }

Anchor pseudo-classes

Anchor pseudo-classes paling sering digunakan dan dapat ditampilkan dengan berbagai cara. Dengan pseudo-classes ini Anda bisa mengubah link sebagai respons terhadap tindakan pengguna. Berikut list anchor pseudo-classes:

  • a: link – Normal, link yang belum dikunjungi
  • a: visited – Link pengguna yang telah dikunjungi
  • a: hover – Link ketika mouse pengguna di atasnya
  • a: active – Link saat itu diklik

Contoh:

Editor Online
  1. a:link {
  2. color: red;
  3. }
  4. a:visited {
  5. color: green;
  6. text-decoration: none;
  7. }
  8. a:hover {
  9. color: blue;
  10. }
  11. a:active {
  12. color: orange;
  13. }

Urutan kelas semua harus berurutan seperti: :link:visited:hover:active agar ini bekerja dengan baik.

:first-child pseudo-classes

:first-child pseudo-classes digunakan untuk memilih elemen yang merupakan elemen anak pertama dari beberapa elemen lainnya. Dengan begitu Anda bisa memilih penyeleksian untuk menargetkan elemen anak pertama tanpa menambahkan atribut ID atau class pada elemen.

Contoh:

Editor Online
  1. div p:first-child {
  2. background-color: black;
  3. color: white;
  4. }

:last-child pseudo-classes

:last-child pseudo-classes digunakan untuk memilih elemen yang merupakan elemen anak terakhir dari beberapa elemen lainnya. Dengan begitu Anda bisa memilih penyeleksian untuk menargetkan elemen anak terakhir tanpa menambahkan atribut ID atau class pada elemen.

Contoh:

Editor Online
  1. div p:last-child {
  2. background-color: blue;
  3. color: white;
  4. }

Anda bisa memilih elemen <i> terakhir dalam semua elemen <p>

Contoh:

Editor Online
  1. p i:last-child {
  2. background-color: blue;
  3. color: white;
  4. }

Berlaku juga untuk :first-child pseudo-classes

Anda bisa memilih semua elemen <i> dalam semua anak terakhir elemen <p>

Contoh:

Editor Online
  1. p:last-child i {
  2. background-color: blue;
  3. color: white;
  4. }

Berlaku juga untuk :first-child pseudo-classes

:lang pseudo-classes

:lang pseudo-classes memungkinkan Anda untuk menentukan aturan khusus untuk bahasa yang berbeda. :lang pseudo-classes dalam contoh di bawah ini mendefinisikan tanda kutip untuk <q> elemen yang secara eksplisit diberi nilai bahasa no.

Contoh:

Editor Online
  1. q:lang(no) {
  2. quotes: “~” “~”;
  3. }

Pseudo-classes dengan class dan id

Pseudo-classes dapat dikombinasikan dengan atribut class atau ID pada css. Link dengan class=”red” dalam contoh dibawah ini akan ditampilkan dengan warna merah, dan link dengan id=”orange” akan ditampilkan dengan warna orange.

Contoh:

Editor Online
  1. a.red:link {
  2. color: red;
  3. }
  4. a#orange:link {
  5. color: orange;
  6. }

Leave a Reply

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