Pseudo-class nghĩa là lớp giả vì nó không được dùng để gắn liền với các thể xhtml như những class thông thường. Pseudo class sẽ tạo ra thay đổi tới thành phần của XHTML khi một sự kiện nào đó xảy ra. Pseudo sử dụng nhiều nhất là cho các đường liên kết khi người dùng di chuột vào nó hoặc click vào nó.
selector:pseudo-class {
property:value;
}
Có 4 trạng thái liên kết:
html: <a href="http://www.dngaz.com" class="dng">Website</a>
1.link: là liên kết trạng thái ban đầu.
vd:
a.dng:link {
color: red;
}
Nghĩa là trạng thái ban đầu của đường liên kết là chữ màu đỏ.
2. visited: liên kết đã được người dùng click vào rồi.
a.dng:visited{
color: blue;
}
Nghĩa là khi người dùng đã click vào rồi thì nó sẽ hiện chữ màu xanh.
3. hover: là di chuột đi qua liên kết .
a.dng{
color: green;
text-decoration: none;
}
Nghĩa là khi chuột qua liên kết thì sẽ hiện chữ xanh lá cây và mất đường gạch chân dưới.
4. active: Truy cập liên kết.
a.dng{
color: yellow;
}
Nghĩa là khi click vào liên kết thì chữ sẽ chuyển qua màu vàng.
- Ngoài ra còn có nhiều hover cùng 1 lúc chẳng hạn a:active, h1: active , p :active{color: red;}
Ngoài ra còn được sử dụng ngoài các liên kết như trỏ đến các phần tử con và những phần tử mong muốn:
- Hover on <div>
- Hover a <div> element to show a <p> element.
Example:
Trong html:
<body>
<div>Hover over me to show the p element
</div>
</body>
p {
display: none;
background-color: green;
}
div:hover p {
display: block;
}
Nghĩa là p ẩn đi rồi khi ra di chuột đến thẻ div thì p sẽ hiện ra màu nền là xanh lá cây và có dòng chữ hello would!.
3. First-child: Hướng đến phần tử con đầu tiên trong phần tử cha có nhiều con.
Example: a:first{
color: red;
}
Nghĩa là hướng đến phần tử con đầu tiên tính từ trên xuống có màu chữ là đỏ.
Example:
p i:first-child {
color: blue;
}
p:first-child i {
color: blue;
}
4. Lang pseudo-class : cho phép bạn xác định các quy tắc đặc biệt cho các ngôn ngữ khác nhau.
Example:
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
Nghĩa là đầu với cuối của thẻ q sẽ được thay thế bằng 2 dấu ~ A quote in a paragraph ~