CSS Pseudo-class có thể được kết hợp với các lớp CSS thay vì chính các phần tử để cung cấp cách tiếp cận chọn lọc hơn cho phần tử Html.
Ví dụ
Hãy xem một ví dụ về việc kết hợp CSS Pseudo-class và CSS class -
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
.Italy:lang(it)::after {
padding: 20px;
content: '~ Italy';
font-style: italic;
}
.Spain:lang(es)::after {
padding: 8px;
content: '~ Spain';
font-style: italic;
}
.Germany:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
.Spain:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div class="Italy" lang='it'>Rome</div>
<div class="Germany" lang='nl'>Brussels</div>
<div class="Spain" lang='es'>Madrid</div>
</body>
</html> Đầu ra
Sau đây là kết quả -
Ví dụ
Hãy xem một ví dụ khác để kết hợp CSS Pseudo-class và CSS class -
<!DOCTYPE html>
<html>
<head>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-child(1){
background-color: #FF8A00;
}
.child:nth-child(2){
background-color: #F44336;
}
.child:nth-child(3){
background-color: #C303C3;
}
.child:nth-child(4){
background-color: #4CAF50;
}
.child:nth-child(5){
background-color: #03A9F4;
}
.child:nth-child(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Classes and CSS Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
