CSS Pseudo-class

CSS pseudo-class digunakan untuk menambahkan efek khusus pada beberapa selektor.



sintak

Sintaks dari pseudo-class:


selector:pseudo-class {property:value;}

bisa juga dengan cara


selector.class:pseudo-class {property:value;}



Link Pseudo-class

Link dapat ditampilkan secara berbeda dengan css


a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */



Pseudo-classes dan Class CSS

Pseudo-classes dan Class CSS dapat dikombinasikan dengan cara seperti berikut:


a.red:visited {color:#FF0000;}
<a class="red" href="http://www.hadinug.net">hadinug.net</a>


Jika link dalam contoh di atas telah dikunjungi, maka akan ditampilkan dalam warna merah. 



CSS :first-child Pseudo-class 

:first-child pseudo-class cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain. 

Catatan: Untuk :first-child akan bekerja di IE jika dinyatakan <DOCTYPE>. 


Menemukan elemen <p> pertama 

Pada contoh berikut, kita akan memilih setiap elemen <p> pertama yang cocok yang merupakan anak pertama dari setiap elemen:


<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>Saya anak yang kuat.</p>
<p>Saya anak yang kuat.</p>
</body>
</html>


Menemukan elemen <i> pertama di semua elemen <p> 

Pada contoh berikut, kita akan memilih elemen <i> pertama di semua elemen <p>:


<html>
<head>
<style type="text/css">
p > i:first-child
{
font-weight:bold;
}
</style>
</head>

<body>
<p>Saya seorang <i>strong</i> anak yang kuat. Saya seorang <i>strong</i> anak yang kuat</p>
<p>Saya seorang <i>strong</i> anak yang kuat. Saya seorang <i>strong</i> anak yang kuat</p>
</body>
</html>


Mencocokan dengan semua elemen <i> di semua elemen anak pertama <p> 

Pada contoh berikut, selektor akan mencocokan dengan semua elemen <i> dalam elemen <p> yang merupakan anak pertama dari elemen lain:


<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<p>Saya seorang <i>strong</i> anak yang kuat. Saya seorang <i>strong</i> anak yang kuat</p>
<p>Saya seorang <i>strong</i> anak yang kuat. Saya seorang <i>strong</i> anak yang kuat</p>
</body>
</html>

CSS : lang Pseudo-class 

pseudo-class :lang  memungkinkan anda untuk menentukan aturan khusus untuk bahasa yang berbeda. 

Catatan: Internet Explorer 8 (dan lebih tinggi) mendukung pseudo-class :lang jika <DOCTYPE> ditentukan. 


Pada contoh di bawah ini class :lang akan mendefinisikan tanda kutip untuk elemen q dengan lang = "no":


<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Pseudo-classes 

Kolom "CSS" menunjukkan di mana versi CSS properti didefinisikan (CSS1 atau CSS2).

Pseudo nameDescriptionCSS
:activeMenambahkan gaya untuk elemen yang diaktifkan1
:first-childMenambahkan gaya untuk elemen yang merupakan anak pertama dari elemen lain2
:focusMenambah gaya ke sebuah unsur yang memiliki input keyboard fokus2
:hoverMenambahkan gaya untuk elemen ketika anda mengarahkan mouse di atasnya1
:langMenambahkan gaya untuk elemen dengan atribut lang spesifik2
:linkMenambahkan gaya untuk link yang belum dikunjungi1
:visitedAMenambahkan gaya untuk link yang telah dikunjungi1
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda