Pseudo Class Dasar

- Mei 20, 2023

Halo teman-teman kali ini saya akan membawakan materi mengenai Pseudo Class adalah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak 'terlihat' (tidak tertulis di dalam HTML) atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain.

Pertama buatlah html sederhana seperti dibawah

Setelah itu kita melakukan styling pada bagian header. Pada bagian ini adalah styling default dari html. Jika kalian tahan klik pada bagian "Hello Warga Bumi" maka yang terjadi seperti dibawah.

Pada class "hello" kita beri warna pink, Lalu pada bagian class "hello:hover" diberi ukuran font size,color dan font-family.

.hello {
    color: pink;
}

.hello:hover{
    font-size: 30px;
    color: aqua;
    font-family: arial;
}

Hover pada CSS adalah suatu fungsi yang hanya berjalan apabila kursor berada diatas suatu objek tertentu. Bisa dibilang kalau kalian meletak kursor kalian pada styling yang diberi hover maka objek tesebut akan membesar, berwarna dan berubah font.

Pada "hello:active" kita beri font-style italic dan "hello:visited" diberi warna merah.

.hello:active{
    font-style: italic;
}

.hello:visited{
    color: red;
}

Active menentukan dan memilih elemen berdasarkan pada keadaan — keadaan aktif — dan digunakan untuk menerapkan gaya ke elemen ketika itu cocok dengan keadaan itu. Bisa dibilang ketika kalian klik atau klik tahan font-style akan berubah menjadi italic pada bagian yang diberi styling tersebut.
Visited untuk memilih link yang telah dikunjungi. Jika kalian telah selesai mengunjungi link tertentu maka warnanya berubah menjadi merah.

Pada link awal dan link akhir kita beri warna hijau

li:first-child a {
    color: green;
}

li:last-child a {
    color: green;
}

Fist Child digunakan untuk menyeleksi element children yang berada pada urutan pertama.
Last Child digunakan untuk meyeleksi element children yang berada pada urutan akhir.

Berikut 6 macam nth child pada css.

li:nth-child(7) a{
    color: green
}

li:nth-child(2n) a{
    color: green
}

li:nth-child(4n-3) a{
    color: green;
}

li:nth-child(even) a{
    color: green;
}

li:nth-child(odd) a{
    color: green;
}

li:nth-child(odd) a:hover {
    color: yellow;
}

Nth Child(7) digunakan untuk memilih elemen berdasarkan indeks (urutan sumber)

Nth Child(2n) digunakan untuk melakukan peritah kelipan dari 2. Jadi setiap 2 link yang dihitung maka link ke 2 akan menjadi hijau.

Nth Child(4n-3) digunakan untuk melakukan kelipan 4 lalu dikurangi dengan 3 maka akan warna hijau akan dimulai dari link 1.

Mudahnya, jika tambah maka kelipan turun kebawah sesuai angka yang ditentukan dan jika kurang maka akan kelipan naik sesuai angka yang ditentukan.

Nth Child(even) digunakan untuk angka genap saja yang di beri warna hijau.

Nth Child(odd) digunakan untuk angka ganjil saja yang di beri warna hijau.

Nth Child(odd) a:hover digunakan untuk memberi warna kuning jika kursor kalian berada pada link ganjil yang telah ditentukan.

Pada awal dan akhir paragraf kita beriwarna pink dan coklat

p:first-of-type{
    color:pink;
}

p:last-of-type{
    color:brown;
}

First of type untuk menargetkan paragraf pertama dari suatu elemen di dalam kelompoknya.
Last of type untuk menargetkan paragraf terakhir dar suatu elemen di didalam kelompoknya.

Inherit sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance adalah: tag tersebut harus berada di dalam tag lainnya. Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Lalu buatlah hmtl sederhana seperti dibawah.