CSS Pseudo Classes เป็นตัวแทนของสถานะพิเศษขององค์ประกอบที่แตกต่างกัน คลาสเหล่านี้ไม่เพียงแต่แสดงองค์ประกอบพื้นฐานในเอกสาร แต่ยังรวมถึงปัจจัยภายนอก เช่น สถานะ ตำแหน่ง ประวัติ ฯลฯ นักพัฒนาสามารถใช้คลาสหลอกเหล่านี้ได้แม้กระทั่งการจัดรูปแบบองค์ประกอบที่ไม่สามารถเลือกได้โดยตรงผ่าน ตัวเลือก CSS
ไวยากรณ์
ต่อไปนี้เป็นรูปแบบการใช้ CSS Pseudo class ในองค์ประกอบ -
Selector:pseudo-class {
css-property: /*value*/;
} ตัวอย่าง
มาดูตัวอย่างการใช้ CSS Pseudo Classes -
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input:valid {
color: #fefefe;
background-color: #4CAF50;
}
input:invalid {
color: #fefefe;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<label for="EmailSelect">Email :
<input type="email" id="EmailSelect" size="25" required>
</label><br>
<label for="PassSelect">Password :
<input type="password" id="PassSelect" minlength="8" required>
</label>
<div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div>
</fieldset>
</form>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อฟิลด์แบบฟอร์มมีข้อมูลที่ไม่ถูกต้อง -
เมื่อฟิลด์แบบฟอร์มมีข้อมูลที่ถูกต้อง -
ตัวอย่าง
มาดูตัวอย่างอื่นของคลาส CSS Pseudo กัน −
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
a {
text-decoration: none;
background:grey;
color: white;
border-radius: 3px;
padding: 6px;
}
input[type="button"] {
border-radius: 10px;
}
:target {
border:4px solid black;
margin: 0 auto;
height: 200px;
width: 200px;
background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg');
}
#circle {
border-radius: 50%;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<div>
<div id="circle"></div>
<div id="square"></div>
</div>
<div>
<a href="#square">Tile</a>
<a href="#circle">Avatar</a>
</div>
</fieldset>
</form>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ก่อนคลิกปุ่มใด ๆ −
หลังจากคลิก 'ไทล์' ปุ่ม −
หลังจากคลิก 'Avatar' ปุ่ม −
