จัดสไตล์ตามภาษาที่กำหนดในแอตทริบิวต์ lang ใช้ :lang(fr) เลือกองค์ประกอบที่มี lang="fr" (ภาษาฝรั่งเศส) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:lang(fr) { background: green; /* ตัวอย่างเดิมเขียน greeb ผิด */ } </style> </head> &

ใช้ :last-of-type เพื่อจัดสไตล์ <p> ตัวสุดท้ายของ Parent (นับเฉพาะ Tag <p> เท่านั้น) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:last-of-type { background: orange; } </style> </head> <body> <h2>H

ใช้ :last-child เพื่อจัดสไตล์ <p> ที่เป็นลูกคนสุดท้ายของ Parent ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:last-child { background: orange; } </style> </head> <body> <p>This is demo text1.</p>

เมธอด rotateY() ใช้ rotateY(angle) หมุนองค์ประกอบรอบแกน Y (แนวตั้ง) ตัวอย่าง <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform: rotateY(150deg);

Pseudo-class :last-of-type ใช้ :last-of-type เลือก <p> ตัวสุดท้ายของพาเรนต์ (นับเฉพาะ p) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:last-of-type { background: orange; } </style> </head> <body> <h2>Heading</h2> &

ใช้ :empty เพื่อจัดสไตล์ <p> ที่ไม่มีลูก (No children) รวมถึง Text Node ด้วย ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p.demo { width: 300px; height: 20px; background: gray; } p:empty { wid

เมธอด matrix3d() ใช้ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) สำหรับการแปลง 3D ด้วยเมทริกซ์ 4x4 รูปแบบไวยากรณ์ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) a1..d3: ตัวเลขแทนการแปลงเชิงเส้น (linear transformation) a4, b4, c4: ตัวเลขแทนการย้

Pseudo-class :empty ใช้ :empty เลือกองค์ประกอบที่ไม่มีเนื้อหาใดๆ เลย (รวม text node ด้วย) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p.demo { width: 300px; height: 20px; background: gray; } p:empty { width: 150px; height: 20px;

ใช้ :enabled เพื่อจัดสไตล์ <input> ทุกตัวที่เปิดใช้งานอยู่ (ไม่มี attribute disabled) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:enabled { background: blue; } </style> </head> <body> <form action=>

Pseudo-class :enabled ใช้ :enabled เลือก <input> ที่ไม่มีแอตทริบิวต์ disabled (คือพร้อมใช้งาน) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:enabled { background: blue; } </style> </head> <body> <form action=""&

ตำแหน่งสัมพัทธ์กับพาเรนต์ที่มี position position: absolute นำองค์ประกอบออกจาก normal flow และจัดตำแหน่งเทียบกับ ancestor ใกล้ที่สุดที่มี position ไม่ใช่ static ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.one { position: relative; width: 500px;

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

เลือกองค์ประกอบที่เป็นลูกคนแรกของพาเรนต์ :first-child เลือกองค์ประกอบที่เป็นลูกคนแรกของพาเรนต์ ไม่สนใจชนิดขององค์ประกอบ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:first-child { background-color: orange; } </style> </head> <body> &l

ใช้ :first-of-type เพื่อจัดสไตล์ <p> ตัวแรกของ Parent (นับเฉพาะ Tag <p> เท่านั้น) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:first-of-type { background: orange; } </style> </head> <body> <p>This

Pseudo-class :first-of-type ใช้ :first-of-type เลือก <p> ตัวแรกของพาเรนต์ (นับเฉพาะ p) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:first-of-type { background: orange; } </style> </head> <body> <p>This is demo text1.</

เลือกหลานทุกระดับ ใช้ div p (เว้นวรรค) เพื่อเลือก <p> ทุกตัวที่อยู่ภายใน <div> ไม่ว่าจะลึกแค่ไหน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div p { background-color: orange; } </style> </head> <body> <div> <p

รูปแบบการเลือกองค์ประกอบใน CSS Selector คือรูปแบบ (pattern) ที่ใช้เลือกองค์ประกอบ HTML เพื่อนำไปจัดสไตล์ Selector หลักๆ Selector ตัวอย่าง คำอธิบาย .class .demo เลือกทุกองค์ประกอบที่มี class="demo" #id #myid

ใช้ :focus เพื่อจัดสไตล์ Element ที่กำลังได้รับ Focus (เช่น Input ที่กำลังพิมพ์อยู่) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:focus { background-color: orange; } </style> </head> <body> <form action=>

ใช้ CSS Pseudo-class :active เพื่อจัดสไตล์ Link ขณะที่กำลังถูกคลิก (กดเมาส์ค้างอยู่) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:active { background-color: orange; } </style> </head> <body> <a href=https://qrie

Pseudo-class :active ใช้ :active เพื่อจัดสไตล์ลิงก์ในขณะที่กำลังถูกคลิก (mouse down) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:active { background-color: green; } </style> </head> <body> <a href="https://qries.com">