Một pseudo-class là một từ khóa được thêm vào CSS selector. Nó được bắt đầu bằng dấu hai chấm (:) để xác định trạng thái cụ thể. Pseudo-class được dùng để tạo kiểu cho các phần tử như nút được di chuột, phần tử con đầu. Nó cũng dùng cho các trường nhập liệu được chọn.
Syntax
selector:pseudo-class {
/* styles */
}
Interactive/User Action Pseudo-Classes
. :hover
Thuộc tính này áp dụng khi người dùng di chuột qua một phần tử.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
button:hover {
background-color: lightblue;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button>Hover over me!</button>
</body>
</html>
<!--Driver Code Ends-->
Điều này sẽ thay đổi màu nền của nút khi di chuột qua nó.
. :focus
Thuộc tính này áp dụng khi một phần tử nhận được focus (ví dụ: một trường nhập liệu được nhấp vào).
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:focus {
border: 2px solid blue;
outline: none;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<input type="text" placeholder="Click to focus">
</body>
</html>
<!--Driver Code Ends-->
Điều này sẽ thay đổi đường viền của trường nhập liệu thành màu xanh khi nó được focus.
. :active
Thuộc tính này áp dụng khi một phần tử đang được nhấp vào.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
button:active {
background-color: darkblue;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button>Click me!</button>
</body>
</html>
<!--Driver Code Ends-->
Điều này sẽ thay đổi màu nền của nút khi nó đang được nhấp(ở trạng thái active).
. :visited
Thuộc tính này áp dụng cho các liên kết mà người dùng đã truy cập.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
a:visited {
color: purple;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<a href="https://www.example.com//">Visit this link</a>
</body>
</html>
<!--Driver Code Ends-->
Điều này sẽ thay đổi màu của các liên kết đã truy cập thành màu tím.
. :link
Thuộc tính này áp dụng cho các liên kết mà người dùng chưa truy cập.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
a:link {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<a href="https://www.example.com//">Visit this link</a>
</body>
</html>
<!--Driver Code Ends-->
Điều này sẽ làm cho các liên kết chưa truy cập xuất hiện màu xanh lá cây.
. :focus-visible
Thuộc tính này áp dụng khi một phần tử được focus. Nhưng chỉ khi focus hiển thị(ví dụ: cho khả năng truy cập).Style này được áp dụng khi người dùng focus vào một phần tử bằng cách dùng nút tab.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
button:focus-visible {
outline: 3px solid orange;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button>Click or Tab to focus</button>
</body>
</html>
<!--Driver Code Ends-->
. :focus-within
Áp dụng cho một phần tử nếu nó hoặc con cháu của nó có focus.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.form-container:focus-within {
border: 2px solid green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="form-container">
<input type="text" placeholder="Type here">
</div>
</body>
</html>
<!--Driver Code Ends-->
Điều này sẽ áp dụng một đường viền màu xanh lá cây cho phần tử .form-container. Khi bất kỳ phần tử con nào của nó(ví dụ trường nhập liệu) có focus.
Structural targeting pseudo classes
. :first-child
Lựa chọn phần tử con đầu tiên của phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:first-child {
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :last-child
Lựa chọn phần tử con cuối cùng của phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:last-child {
color: blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the last paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :nth-child(n)
Lựa chọn phần tử con thứ n của phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:nth-child(5) {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
<p>This is the fifth paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :nth-last-child(n)
Lựa chọn phần tử con thứ n tính từ cuối của phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:nth-last-child(1) {
color: orange;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :first-of-type
Lựa chọn thể hiện đầu tiên của một kiểu cụ thể bên trong một phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:first-of-type {
color: purple;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<span>Some text</span>
<p>This is the first paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :last-of-type
Lựa chọn thể hiện cuối cùng của một kiểu cụ thể bên trong phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:last-of-type {
color: yellow;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<span>Some text</span>
<p>This is the last paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :nth-of-type(n)
Lựa chọn thể hiện thứ n của một kiểu cụ thể.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:nth-of-type(2) {
color: pink;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<span>Some text</span>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends--gt;
. :nth-last-of-type(n)
Lựa chọn thể hiện thứ n của một kiểu cụ thể tính từ cuối.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:nth-last-of-type(1) {
color: brown;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<span>Some text</span>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :only-child
Lựa chọn các phần tử là con duy nhất của phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:only-child {
color: teal;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the only paragraph.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :only-of-type
Lựa chọn các phần tử là thể hiện duy nhất của kiểu của chúng trong phần tử cha.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:only-of-type {
color: coral;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<p>This is the only paragraph.</p>
<span>Some text</span>
</div>
</body>
</html>
<!--Driver Code Ends-->
. :empty
Lựa chọn các phần tử không có phần tử con hoặc nội dung.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div:empty {
background-color: green;
}
#one {
height: 100px;
width: 100px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="one"></div>
<div>
<p>This div has content.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Form Pseudo-Classes
. :checked
Lựa chọn các ô checkbox hoặc radio được chọn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:checked {
outline: 5px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
Agree to terms <input type="checkbox">
</body>
</html>
<!--Driver Code Ends-->
. :disabled
Lựa chọn các phần tử bị vô hiệu hóa.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:disabled {
background-color: lightgray;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<input type="text" disabled placeholder="Disabled input">
</body>
</html>
<!--Driver Code Ends-->
. :enabled
Lựa chọn các phần tử được kích hoạt.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:enabled {
background-color: lightblue;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<input type="text" placeholder="Enabled input">
</body>
</html>
<!--Driver Code Ends-->
. :required
Lựa chọn các trường biểu mẫu được đánh dấu là bắt buộc.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:required {
border: 2px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<form>
<input type="text" required placeholder="This field is required">
</form>
</body>
</html>
<!--Driver Code Ends-->
. :optional
Lựa chọn các trường biểu mẫu không bắt buộc.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:optional {
border: 2px solid green;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<form>
<input type="text" placeholder="This field is optional">
</form>
</body>
</html>
<!--Driver Code Ends-->
. :valid
Lựa chọn các trường biểu mẫu có giá trị hợp lệ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:valid {
border: 2px solid green;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<form>
<input type="email" placeholder="Enter valid email" required>
</form>
</body>
</html>
<!--Driver Code Ends-->
. :invalid
Lựa chọn các trường biểu mẫu có giá trị không hợp lệ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:invalid {
border: 2px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<form>
<input type="email" placeholder="Enter valid email" required>
</form>
</body>
</html>
<!--Driver Code Ends-->
. :in-range
Lựa chọn các trường nhập liệu nằm trong một phạm vi hợp lệ (ví dụ: một trường nhập số).
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:in-range {
background-color: lightgreen;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<form>
<input type="number" min="1" max="10" placeholder="Pick a number between 1 and 10">
</form>
</body>
</html>
<!--Driver Code Ends-->
. :out-of-range
Lựa chọn các trường nhập liệu nằm ngoài phạm vi hợp lệ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:out-of-range {
background-color: lightcoral;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<form>
<input type="number" min="1" max="10" placeholder="Pick a number between 1 and 10">
</form>
</body>
</html>
<!--Driver Code Ends-->
. :read-only
Lựa chọn các phần tử ở trạng thái chỉ đọc.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:read-only {
background-color: lightgray;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<input type="text" value="This is read-only" readonly>
</body>
</html>
<!--Driver Code Ends-->
. :read-write
Lựa chọn các phần tử có thể chỉnh sửa.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:read-write {
background-color: lightyellow;
}
</style>
<!--Driver Code Starts-->
</head>
</body>
<input type="text" placeholder="You can type here">
</body>
</html>
<!--Driver Code Ends-->