• About
  • Advertise
  • Privacy & Policy
  • Contact
NQ NEWS
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
No Result
View All Result
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
No Result
View All Result
NQ NEWS
No Result
View All Result
Home Kiến thức tổng hợp Lập trình

Pseudo-Class trong CSS

@admiz by @admiz
20/04/2022
in Lập trình
0
Pseudo-Class trong CSS

Pseudo-Class trong CSS được sử dụng để thêm các hiệu ứng đặc biệt tới một số Selector mà không cần sử dụng đến JavaScript hoặc bất cứ ngôn ngữ Script nào. Ví dụ viết CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào, định dạng đường dẫn khi đã và chưa được click vào…

Cú pháp pseudo-class

Cú pháp đơn giản cho Pseudo-Class trong CSS là:

selector:pseudo-class {
property:value;

Pseudo-Class cho đường link

Pseudo-Class được sử dụng nhiều nhất với các đường liên kết (thẻ <a>) để tạo ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó.

Có tất cả 4 trạng thái tương đương với 4 Pseudo-Class của đường link:

  • a:link {color:blue; : Hiển thị hiệu ứng khác biệt để người đọc biết đây là đường liên kết.
  • a:visited {color:green; : Đường link đã từng được click vào.
  • a:hover {color:red; : Di chuột qua đường link.
  • a:active {color:navy; : Đường link đang được nhấp chuột vào.

Lưu ý:

  • a:hover phải xuất hiện sau a:link và a:visited trong CSS để tạo ra hiệu ứng.
  • Tương tự, a:active phải xuất hiện sau a:hover.
  • Các tên được sử dụng cho Pseudo Class là không phân biệt chữ hoa chữ thường.
  • Pseudo Class khác với các Class khác trong CSS, tuy nhiên chúng có thể kết hợp với nhau.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
/* Viết bởi Quantrimang.com */
a:link {
color: blue;


a:visited {
color: green;


a:hover {
color: pink;


a:active {
color: red;

</style>
</head>
<body>

<p><b><a href="https://nq.com.vn/" target="_blank">Trang chủ website
Quản trị mạng</a></b></p>


</body>
</html>

Đoạn code trên định nghĩa đường liên kết lúc:

  • Bình thường sẽ có màu xanh (blue) và gạch chân là giá trị mặc định.
  • Đường liên kết đã được người dùng nhấp vào, nó sẽ có màu xanh (green).
  • Người dùng di chuột lên (chưa nhấp) nó sẽ có màu hồng.
  • Người dùng chỉ nhấp và giữ chuột nó sẽ có màu đỏ (ít khi xảy ra).

Pseudo-class và CSS Class

Các Pseudo-class có thể được kết hợp với các lớp trong CSS.

Ví dụ, khi bạn di chuột qua liên kết, nó sẽ thay đổi màu:

a.highlight:hover {
color: #ff0000;

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;

</style>
</head>
<body>

<p><a class="highlight" href="https://nq.com.vn/">Trang chủ website
Quản trị mạng</a> <span>(Sử dụng Pseudo-class kết hợp CSS Class)</span></p>

<p><a href="https://nq.com.vn/lang-cong-nghe">Làng Công nghệ - Quản trị
mạng</a> <span>(Không sử dụng Pseudo-class kết hợp CSS Class)</span></p>


</body>
</html>

Di chuột vào <div>

Một ví dụ về việc sử dụng pseudo-class :hover trên <div> làm thay đổi màu nền của phần tử.

div:hover {
background-color: purple;
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: purple;
color: white;
padding: 25px;
text-align: center;


div:hover {
background-color: #DB7093;

</style>
</head>
<body>

<p>Di chuột qua phần tử div bên dưới sẽ làm thay đổi màu nền của nó:</p>

<div>Thử di chuột vào đây xem</div>

</body>
</html>

Dùng Pseudo-Class tạo tooltip :hover đơn giản

Tạo một tooltip :hover đơn giản kiểu di chuyển chuột vào phần tử <div> để hiển thị một phần tử <p>

p {
display: none;
background-color: yellow;
padding: 20px;


div:hover p {
display: block;

<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
padding: 20px;


div:hover p {
display: block;

</style>
</head>
<body>

<div>Di chuột qua đây để thấy điều thú vị!
<p><img src="you-are-beautiful.jpg" alt="You Are Beautiful" style="width:60%"></p>
</div>

</body>
</html>

Pseudo-class :first-child trong CSS

Pseudo-class :first-child xác định một phần tử cụ thể là phần tử con đầu tiên của phần tử khác và thêm style đặc biệt tới phần tử đó.

Chọn tất cả thẻ <p> đầu tiên và định kiểu cho nó

p:first-child {
color: purple;

Để :first-child có thể làm việc trong IE, cần phải khai báo phần tử <!DOCTYPE> ở đầu tài liệu.

Ví dụ, để <p> đầu tiên có chữ màu tím, có thể làm như sau:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: red;

</style>
</head>
<body>

<p>Website Quản trị mạng.</p>
<p>Website Quản trị mạng.</p>
<p><b>Chú ý:</b> Để :first-child có thể làm việc trong IE, cần phải khai báo
phần tử !DOCTYPE ở đầu tài liệu.</p>


</body>
</html>

Chọn <i> đầu tiên trong tất cả các <p> và định kiểu cho nó

p i:first-child {
color: blue;

Ví dụ sau sử dụng :first-child để xác định phần tử <i> là phần tử con đầu tiên trong tất cả các <p> và thêm style đặc biệt cho <i>.

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;

</style>
</head>
<body>

<p>Website <i>Quantrimang.com</i>. Website <i>Quantrimang.com</i>.</p>
<p>Website <i>Quantrimang.com</i>. Website <i>Quantrimang.com</i>.</p>
<p><b>Chú ý:</b> Để <i>:first-child</i> có thể làm việc trong IE, cần phải
khai báo phần tử !DOCTYPE ở đầu tài liệu.</p>


</body>
</html>

Chọn tất cả các <i> trong <p> đầu tiên và định kiểu cho nó

p:first-child i {
color: blue;

Ví dụ sau sử dụng :first-child để xác định tất cả các phần tử <i> là phần tử con đầu tiên trong <p> đầu tiên và thêm style đặc biệt cho <i>.

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;

</style>
</head>
<body>

<p>Website <i>Quantrimang.com</i>. Website <i>Quantrimang.com</i>.</p>
<p>Website <i>Quantrimang.com</i>. Website <i>Quantrimang.com</i>.</p>
<p><b>Chú ý:</b> Để <i>:first-child</i> có thể làm việc trong IE, cần phải
khai báo phần tử !DOCTYPE ở đầu tài liệu.</p>


</body>
</html>

Pseudo-class :lang trong CSS

Sử dụng Pseudo-class :lang trong CSS để định nghĩa một quy tắc đặc biệt cho một ngôn ngữ nào đó trong một phần tử cụ thể.

<html>
<head>
<style>
q:lang(vi) { quotes: "~" "~";

</style>
</head>
<body>

<p>Tiếng Việt <q lang="vi">Một đoạn văn Tiếng Việt được trích dẫn.</q></p>

</body>
</html>

Class này rất hữu ích với những tài liệu được trình bày bởi nhiều ngôn ngữ và có các quy ước khác nhau.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(vi) { quotes: "~" "~";
:lang(en) { quotes: '"' '"';
:lang(fr) { quotes: "<<" ">>";

</style>
</head>
<body>

<p>Tiếng Việt <q lang="vi">Một đoạn văn Tiếng Việt được trích dẫn.</q></p>
<p>Tiếng Anh <q lang="en">Một đoạn văn Tiếng Anh được trích dẫn.</q></p>
<p>Tiếng Pháp <q lang="fr">Một đoạn văn Tiếng Pháp được trích dẫn.</q></p>
<p><b>Chú ý:</b> Để <i>:lang</i> có thể làm việc trong IE, cần phải khai báo
phần tử !DOCTYPE ở đầu tài liệu.</p>


</body>
</html>

Bài trước: Combinator trong CSS

Bài tiếp: Pseudo-element trong CSS

Post Views: 198
Tags: các loại Pseudo Class của đường linkcú pháp Pseudo Classhọc cssPseudo Class của đường linkPseudo class first-childPseudo Class là gìPseudo class langpseudo-classtooltip hover
Previous Post

Regular Expression (RegEx) trong Python

Next Post

Lệnh DELETE trong SQL Server

Related Posts

Dien Tich Tam Giac 640 1
Lập trình

Công thức tính diện tích tam giác: vuông, thường, cân, đều

26/12/2021
Huong Dan Cai Dat Node Js 640 1
Lập trình

Hướng dẫn cài đặt Node.js

26/12/2021
Cau Truc Du Lieu Hang Doi Queue 640 1
Lập trình

Cấu trúc dữ liệu hàng đợi (Queue)

26/12/2021
Hoc Css 640 8
Lập trình

Thanh điều hướng – Navigation Bar trong CSS

26/12/2021
Ms Sql Server Management Studio 640 3
Lập trình

Quản lý MS SQL Server bằng Management Studio

26/12/2021
Java Development Kit 1
Lập trình

Tải Java Development Kit 8-update-281

26/12/2021
Next Post

Lệnh DELETE trong SQL Server

Bài mới nhất

Mvc Là Gì, ưu Nhược điểm Và ứng Dụng Của Mô Hình Mvc Trong Lập Trình Web 612d20c0eb6dc.jpeg

MVC là gì, ưu nhược điểm và ứng dụng của mô hình MVC trong lập trình web

20/06/2025
Kol Là Gì? Lợi ích Mà Kol Marketing Mang Lại Cho Doanh Nghiệp 612d2059db2d2.jpeg

KOL là gì? Lợi ích mà KOL Marketing mang lại cho doanh nghiệp

20/06/2025
Thiết Kế Website Bán Gas, Bình Gas, Bếp Gas Chuyên Nghiệp, Uy Tín 612d224cdb34e.png

Thiết kế website bán gas, bình gas, bếp gas chuyên nghiệp, uy tín

19/06/2025
Web 2.0 Là Gì? Tính Năng Và Lợi ích Mà Web 2.0 Mang Lại Trong Thực Tiễn 612d21e2234f7.jpeg

Web 2.0 là gì? Tính năng và lợi ích mà Web 2.0 mang lại trong thực tiễn

19/06/2025
Spring Framework Là Gì? Lợi ích Khi Sử Dụng Và Các Nội Dung Cơ Bản 612d21dc29c49.jpeg

Spring framework là gì? Lợi ích khi sử dụng và các nội dung cơ bản

18/06/2025

Danh mục

  • Android
  • Bảo mật máy tính
  • Bảo mật, Antivirus
  • Chuyện công nghệ
  • Deep Learning
  • Development
  • Dịch vụ công trực tuyến
  • Dịch vụ nhà mạng
  • Giải pháp bảo mật
  • Hệ thống
  • Hệ thống
  • iPhone
  • Kiến thức bảo mật
  • Kiến thức cơ bản phổ thông
  • Kiến thức Marketing căn bản
  • Kiến thức tổng hợp
  • Lập trình
  • Linux
  • Linux OS
  • macOS
  • Mail Server
  • Mạng LAN – WAN
  • Máy ảo
  • Máy chủ
  • ms excel
  • ms-powerpoint
  • Nền tảng điện toán đám mây
  • Phần cứng
  • Phần Mềm
  • Quản trị hệ thống
  • Raspberry Pi
  • Sửa lỗi máy tính
  • Tăng tốc máy tính
  • Thủ thuật
  • Thủ thuật SEO
  • Thủ thuật Wifi
  • Tiện ích hệ thống
  • Tin học văn phòng
  • Tin tức
  • Uncategorized
  • Ứng dụng
  • Website
  • Windows Server 2012

Thẻ

#app #chatbot #chatbot tự động #CRM #Kiến thức cơ bản #Techblog #Thiết kế website Android apple CPU Email Marketing Google Google Drive hacker HTML hàm python hàm python có sẵn hình nền hình nền máy tính học css học python học SQL ios iphone iphone 12 iPhone X macos Microsoft mssql MS SQL Server ngôn ngữ lập trình python Raspberry Pi Samsung smartphone SQL SQL Server tham số trong C thủ thuật windows 10 tài liệu python windows windows 10 YouTube điện thoại thông minh ứng dụng
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 Pha Le Solution

No Result
View All Result
  • Home

© 2022 Pha Le Solution