CSS Pseudo-classes

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    236 lượt xem


CSS Pseudo-classes dùng để CSS cho các element ở trạng thái đặc biệt như khi được hover, focus, active,...

Cú pháp

Cú pháp của pseudo-classes:

selector:pseudo-class {    property: value;  }

 

Anchor Pseudo-classes

Các link có thể được hiển thị theo nhiều cách khác nhau:

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

Lưu ý: a: hover PHẢI đến sau a:linka:visited trong định nghĩa CSS để có hiệu quả! a: active PHẢI đến sau a:hover vào định nghĩa CSS để có hiệu quả! Tên Pseudo-class không phân biệt chữ hoa chữ thường.

Pseudo-classes và HTML Classes

Các Pseudo-classes có thể được kết hợp với các classes HTML:

Khi bạn di chuột qua link trong ví dụ, nó sẽ thay đổi màu sắc:

a.highlight:hover {    color: #ff0000;  }

 

Hover trên <div>

Ví dụ về việc sử dụng :hover pseudo-class trên element <div>:

div:hover {    background-color: blue;  }

 

Tooltip Hover đơn giản

Di chuột qua element <div> để hiển thị element <p> (như tooltip):

p {    display: none;    background-color: yellow;    padding: 20px;  }    div:hover p {    display: block;  }

 

:first-child Pseudo-class

:first-child pseudo-class khớp với một element được chỉ định là element con đầu tiên của một element khác.

Trong ví dụ sau, selector khớp với bất kỳ element <p> nào là element con đầu tiên của bất kỳ element nào:

p:first-child {    color: blue;  }

 

:lang Pseudo-class

: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.

Trong ví dụ dưới đây, :lang xác định dấu ngoặc kép cho element <q> với lang = "no":

<html>  <head>  <style>  q:lang(no) {    quotes: "~" "~";  }  </style>  </head>  <body>    <p>Văn bản <q lang="no">Đoạn văn bên trong dấu ngoặt kép</q> Văn bản.</p>    </body>  </html>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.