♠ Posted by Unknown at 17.00
CSS Pseudo-classes
Apa Pseudo - classes ?
Sebuah pseudo-class digunakan untuk mendefinisikan keadaan khusus dari suatu unsur. Sebagai contoh, dapat digunakan untuk :
- Gaya elemen ketika mouse pengguna di atasnya
- Gaya dikunjungi dan belum dikunjungi link berbeda
- Gaya elemen ketika mendapat fokus
Jika diklik maka akan muncul tampilan sebagai berikut.
Sintaks pseudo- classes :
Anchor Pseudo-classes
Link dapat ditampilkan dengan cara yang berbeda :
Maka akan muncul tampilan sebagai berikut.
/* unvisited link */
a:link {
color: red;
}
/* mouse over link */
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
Catatan :
a : hover HARUS datang setelah a: link dan a: visited dalam definisi CSS agar efektif ! a : aktif harus datang setelah : hover dalam definisi CSS agar efektif ! Nama pseudo-class tidak case-sensitive.
Pseudo-classes and CSS Classes
Pseudo - kelas dapat dikombinasikan dengan kelas CSS :
Ketika Anda membawa lebih dari link dalam contoh , itu akan berubah warna :
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>
Contoh menggunakan :hover pseudo-class pada elemen <div> :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div class="mouseover">Mouse Over Me</div>
</body>
</html>
CSS - The :first-child Pseudo-class
Match the first <p> element
Dalam contoh berikut , pemilih cocok setiap < p > unsur yang merupakan :first-child dari setiap elemen :
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
maka akan muncul tampilan sebagai berikut.
Match the first <i> element in all <p> elements
Dalam contoh berikut , pemilih cocok pertama elemen< i > dalam semua elemen < p > :
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
maka akan muncul tampilan sebagai berikut.
CSS - The : lang Pseudo - class
The : lang pseudo-class memungkinkan Anda untuk menentukan aturan khusus untuk bahasa yang berbeda . Dalam contoh di bawah ini :lang mendefinisikan tanda kutip untuk < q > elemen dengan lang = " no " :
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
<p><b>Note:</b> IE8 supports the :lang pseudo class only if a !DOCTYPE is specified.</p>
</body>
</html>
maka akan muncul tampilan sebagai berikut.
sumber : http://www.w3schools.com
0 komentar:
Posting Komentar