คลาส .active สำหรับลิงก์ปัจจุบัน เพิ่มคลาส active ให้ลิงก์ที่เป็นหน้าปัจจุบัน และจัดสไตล์แยกต่างหาก ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 5; padding: 5; } li a { display: block; width: 7

Vertical Navigation Bar ใช้ display: block ให้ <a> ภายใน <li> และกำหนด width ให้ลิงก์เต็มพื้นที่ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 5; padding: 5; } li a { display: block;

คุณสมบัติ shorthand border-top ใช้ border-top: thick dashed #FFFF00 ตั้งค่า width, style, color ของเส้นขอบบนพร้อมกัน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { border-style: solid; border-top: thick dashed #FFFF00; } </style> </head&g

background-attachment: fixed ใช้ background-attachment: fixed ทำให้ภาพพื้นหลังไม่เลื่อนตามเนื้อหา (parallax effect) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connec

border ให้ ul กำหนด border: 2px solid blue ให้ <ul> เพื่อสร้างขอบรอบแถบนำทางแนวตั้ง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; border: 2px solid blue; } li

ใช้ :read-write เพื่อเลือก Element ที่แก้ไขได้ (ไม่มี Attribute readonly และไม่ได้ disabled) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:read-write { background-color: blue; color: white; } </style> </head>

ใช้ :required เพื่อจัดสไตล์ <input> ที่มี Attribute required (บังคับกรอก) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:required { background-color: orange; } </style> </head> <body> <form> S

ตำแหน่งติดตามการเลื่อน (Sticky Positioning) position: sticky ทำให้องค์ประกอบ Verhalten ตรงตำแหน่งจนกว่าจะเลื่อนผ่านจุดที่กำหนด (top: 0) แล้วจะติดอยู่ที่ขอบวิวพอร์ต ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.sticky { position: -webkit-sticky; positio

Pseudo-class :required ใช้ :required เลือก <input> ที่มีแอตทริบิวต์ required ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:required { background-color: orange; } </style> </head> <body> <form> Subject: <input ty

ใช้ :root เพื่อจัดสไตล์ Root Element ของ Document (ใน HTML คือ <html>) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> :root { background: blue; color: white; } </style> </head> <body> <h1>Headin

Pseudo-class :root :root เลือกองค์ประกอบรากของเอกสาร (ใน HTML คือ <html>) ใช้กันบ่อยสำหรับกำหนด CSS custom properties (variables) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> :root { background: blue; color: white; } </style> </head&g

ใช้ :target เพื่อ Highlight Element ที่เป็น Target ของ URL Fragment (Anchor Link) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> :target { border: 2px solid #D4D4D4; background-color: orange; color: white; } </sty

ใช้ :not(selector) เพื่อจัดสไตล์ Element ทุกตัว ยกเว้น Selector ที่ระบุ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { color: red; } :not(p) { color: blue; } </style> </head> <body> <

Pseudo-class :target ใช้ :target จัดสไตล์องค์ประกอบที่มี id ตรงกับ hash ใน URL (เช่น #tut1) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> :target { border: 2px solid #D4D4D4; background-color: orange; color: white; } </style> </head>

จัดสไตล์อินพุตที่มีค่าถูกต้อง ใช้ :valid จัดสไตล์ <input> ที่ค่าผ่านการตรวจสอบ (เช่น email ถูกต้อง) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:valid { background: red; color: white; } </style> </head> <body> <h2&

ใช้ :only-of-type เพื่อจัดสไตล์ <p> ที่เป็น Tag <p> คนเดียว ของ Parent (อาจมี Tag อื่นอยู่แต่ <p> มีแค่ตัวเดียว) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:only-of-type { background: orange; color: white; }

Pseudo-class :only-of-type ใช้ :only-of-type เลือก <p> ที่เป็น <p> เพียงตัวเดียวภายในพาเรนต์ (อาจมีลูกชนิดอื่นได้) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:only-of-type { background: orange; color: white; } </style> </head

ใช้ :only-child เพื่อจัดสไตล์ <p> ที่เป็น ลูกคนเดียว ของ Parent (ไม่มีพี่น้อง Element อื่น) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:only-child { background: orange; } </style> </head> <body> <h1>He

ใช้ :optional เพื่อจัดสไตล์ <input> ที่ ไม่มี Attribute required (กรอกหรือไม่ก็ได้) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:optional { background-color: blue; } </style> </head> <body> <form>

Pseudo-class :optional ใช้ :optional เลือก <input> ที่ ไม่มี แอตทริบิวต์ required ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:optional { background-color: blue; } </style> </head> <body> <form> Subject: <input