CSS Pseudo-classes สามารถรวมกับ CSS Classes ได้แทนที่จะเป็นกับองค์ประกอบโดยตรง เพื่อให้ได้วิธีการเลือกองค์ประกอบ HTML ที่เฉพาะเจาะจงมากขึ้น
ตัวอย่าง
ลองดูตัวอย่างสำหรับการรวม CSS Pseudo-classes และ CSS classes:
<!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>
ผลลัพธ์
ผลลัพธ์ดังนี้:
ตัวอย่าง
ลองดูตัวอย่างเพิ่มเติมสำหรับการรวม CSS Pseudo-classes และ CSS classes:
<!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>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
