CSS Pseudo-classes

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    131 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,...

Advertisement

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

Tin tức mới

Tin tức thú vị

Nhà tài trợ: