Memahami Pseudo Class Pada CSS

tutorial css pseudo class

Pseudo Class Adalah kelas semu yang dimiliki oleh sebuah elemen HTML, yang membuat kita dapat mendefinisikan style pada “keadaan tertentu” dari elemen tersebut.

Pseudo Class terbagi menjadi beberapa tipe antara lain.

  1. Pseudo Class yang berhubungan dengan link

    :link, style default pada sebuah link (a yang memiliki href)

    :hover, style default ketika kursor mouse berada di atas sebuah link / elemen

    :active, style ketika sebuah link di-klik (dalam keadaan aktif)

    :visited, style ketika sebuah link sudah pernah dikunjungi sebelumnya (menggunakan browser yang sama)

  2. Pseudo Class yang berhubungan dengan posisi elemen (1)

    :first-child, memilih elemen pertama dari sebuah parent (element pembungkusnya)
    :last-child, memilih elemen terakhir dari sebuah parent (element pembungkusnya)

    :nth-child, memilih elemen ke-n dari sebuah parent (element pembungkusnya), dimana n bisa berarti urutan (1), (2), … atau pola (2n), (3n+2), (4n+1), atau ganjil dan genap (even) & (odd).

  3. Pseudo Class yang berhubungan dengan posisi elemen (2)

    :first-of-type, memilih elemen pertama dari sebuah jenis / tipe tag

    :last-of-type, memilih elemen terakhir dari sebuah jenis / tipe tag

Latihan untuk Pseudo Class

[code]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo Class</title>
<style>
.hello{
color:orange;
}
.hello:hover{
font-family:arial;
font-size:20px;
color:green;
}
.hello:active{
font-style: italic;
}
.hello:visited{
color:red;
}

/*pseudo class berhubungan dengan posisi*/
/* urutan awal
li:first-child a{
color:green;
}
*/
/* urutan terakhir
li:last-child a{
color:green;
}*/
/*nth-child, urutan kustom
kelipatan2 = (2n)
kelipatan3 = (3n)
kelipatan3 pada urutan pertama = (3n-2);
kelipatan3 pada urutan keenam = (3n+6);
*/
li:nth-child(2n-1) a{
color:orange;
}

/*atau gunakan even(genap), ganjil(odd)*/
li:nth-child(odd) a:hover{
color:royalblue;
}
li:nth-child(even) a:hover{
color:salmon;
}

/*Pseudo Class yang berhubungan dengan posisi elemen (2)*/
/*p:first-of-type{
color:yellow;
}*/
p:last-of-type{
color:yellow;
}
</style>
</head>
<body>
<a href="#" class="hello">Hello World</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel optio cum deserunt recusandae dolorum possimus dignissimos minima incidunt. Explicabo ad, molestiae in consequuntur aliquid rem harum placeat. Ea sed, a!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, debitis officiis magni enim sed saepe hic, officia magnam voluptatibus nesciunt rerum eius perferendis incidunt laudantium qui tenetur alias, sapiente facere?</p>
</body>
</html>

[/code]

Postingan tentang CSS

Memahami Pseudo Class pad CSS

Kupas Tuntas List di HTML

Selector pada CSS

Property Background CSS

Text Styling CSS

Font Styling CSS

Please follow and like us:
error

Related posts

4 Thoughts to “Memahami Pseudo Class Pada CSS”

Leave a Comment