เราสามารถเพิ่มสไตล์เฉพาะให้กับองค์ประกอบที่มีอยู่ใน HTML โดยใช้คลาส CSS Pseudo ซึ่งเลือกองค์ประกอบที่มีสถานะเฉพาะ เช่น (โฮเวอร์ เข้าชมแล้ว ปิดการใช้งาน ฯลฯ)
หมายเหตุ − ในการแยกคลาส CSS Pseudo ออกจาก Pseudo Elements ใน CSS3 คลาสหลอกใช้สัญกรณ์โคลอนเดี่ยว
ไวยากรณ์
ต่อไปนี้เป็นรูปแบบการใช้ CSS Pseudo class บนองค์ประกอบ -
Selector:pseudo-class {
css-property: /*value*/;
} ต่อไปนี้เป็นคลาสหลอก CSS ที่มีอยู่ทั้งหมด -
| ซีเนียร์ | คลาสหลอก &คำอธิบาย |
|---|---|
| 1 | ใช้งานอยู่ จะเลือกองค์ประกอบที่กล่าวถึงที่ใช้งานอยู่ |
| 2 | ตรวจสอบแล้ว จะเลือกทุกองค์ประกอบที่กล่าวถึงที่ตรวจสอบแล้ว |
| 3 | ปิดการใช้งาน จะเลือกทุกองค์ประกอบที่กล่าวถึงสำหรับผู้พิการ |
| 4 | ว่าง มันเลือกทุกองค์ประกอบที่กล่าวถึงที่ไม่มีลูก |
| 5 | เปิดใช้งาน มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เปิดใช้งาน |
| 6 | ลูกคนแรก มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เป็นลูกคนแรกของผู้ปกครอง |
| 7 | รุ่นแรก มันเลือกทุกองค์ประกอบที่เป็นองค์ประกอบแรกที่กล่าวถึงของผู้ปกครอง |
| 8 | โฟกัส จะเลือกองค์ประกอบที่กล่าวถึงที่มีการโฟกัส |
| 9 | โฮเวอร์ มันเลือกองค์ประกอบที่กล่าวถึงเมื่อวางเมาส์เหนือ |
| 10 | อยู่ในช่วง จะเลือกองค์ประกอบที่กล่าวถึงด้วยค่าภายในช่วงที่ระบุ |
| 11 | ไม่ถูกต้อง จะเลือกองค์ประกอบที่กล่าวถึงทั้งหมดที่มีค่าที่ไม่ถูกต้อง |
| 12 | lang(ภาษา) จะเลือกทุกองค์ประกอบที่กล่าวถึงด้วยค่าแอตทริบิวต์ lang ที่ขึ้นต้นด้วย "ภาษา" |
| 13 | ลูกคนสุดท้าย มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เป็นลูกคนสุดท้ายของ parent |
| 14 | ตัวสุดท้ายของประเภท มันเลือกทุกองค์ประกอบที่เป็นองค์ประกอบที่กล่าวถึงล่าสุดของ parent |
| 15 | ลิงค์ จะเลือกองค์ประกอบที่กล่าวถึงทั้งหมดที่ยังไม่ได้เยี่ยมชม |
| 16 | ไม่(ตัวเลือก) มันเลือกทุกองค์ประกอบที่ไม่ใช่องค์ประกอบดังกล่าว |
| 17 | nth-child(n) มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เป็นลูกที่ n ของผู้ปกครอง |
| 18 | nth-last-child(n) มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เป็นลูกที่ n ของแม่ นับจากลูกสุดท้าย |
| 19 | nth-last-oftype(n) มันเลือกทุกองค์ประกอบที่กล่าวถึงซึ่งเป็นองค์ประกอบที่กล่าวถึงที่ n ของผู้ปกครอง นับจากลูกสุดท้าย |
| 20 | nth-of-type(n) มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เป็นองค์ประกอบที่กล่าวถึง n ขององค์ประกอบหลัก |
| 21 | เฉพาะประเภท มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เป็นองค์ประกอบที่กล่าวถึงเพียงองค์ประกอบหลัก |
| 22 | ลูกคนเดียว มันเลือกทุกองค์ประกอบที่กล่าวถึงที่เป็นลูกคนเดียวของผู้ปกครอง |
| 23 | ไม่บังคับ มันเลือกองค์ประกอบที่กล่าวถึงโดยไม่มีแอตทริบิวต์ "จำเป็น" |
| 24 | อยู่นอกช่วง มันเลือกองค์ประกอบที่กล่าวถึงที่มีค่านอกช่วงที่ระบุ |
| 25 | อ่านอย่างเดียว มันเลือกองค์ประกอบที่กล่าวถึงด้วยแอตทริบิวต์ "อ่านอย่างเดียว" ที่ระบุ |
| 26 | อ่าน-เขียน มันเลือกองค์ประกอบที่กล่าวถึงโดยไม่มีแอตทริบิวต์ "อ่านอย่างเดียว" |
| 27 | จำเป็น มันเลือกองค์ประกอบที่กล่าวถึงโดยระบุแอตทริบิวต์ "จำเป็น" |
| 28 | ราก จะเลือกองค์ประกอบรากของเอกสาร |
| 29 | เป้าหมาย จะเลือกองค์ประกอบที่กล่าวถึงที่ใช้งานอยู่ในปัจจุบัน (คลิกที่ URL ที่มีชื่อจุดยึดนั้น) |
| 30 | ใช้ได้ จะเลือกองค์ประกอบที่กล่าวถึงทั้งหมดที่มีค่าที่ถูกต้อง |
| 31 | เข้าชมแล้ว จะเลือกองค์ประกอบที่กล่าวถึงทั้งหมดที่เข้าชมแล้ว |
ตัวอย่าง
มาดูตัวอย่าง CSS Pseudo Class กัน −
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
มาดูตัวอย่างอื่นของ CSS Pseudo Class −
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อไม่ได้วางเมาส์เหนือองค์ประกอบ div -
เมื่อวางเมาส์เหนือองค์ประกอบ div -
