ใช้ :out-of-range เพื่อจัดสไตล์ <input type=number> ที่มีค่าอยู่นอกช่วง min ถึง max ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:out-of-range { border: 3px dashed orange; background: yellow; } </style> </h

จัดสไตล์อินพุตที่ค่านอกช่วง ใช้ :out-of-range สำหรับ <input type="number"> ที่มี min/max และค่าที่ป้อนอยู่นอกช่วง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:out-of-range { border: 3px dashed orange; background: yellow; } <

ใช้ :read-only เพื่อเลือก Element ที่เป็น Read-only (ไม่สามารถแก้ไขได้ เช่น Input ที่มี Attribute readonly) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:read-only { background-color: blue; color: white; } </style>

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

เลือกองค์ประกอบที่อ่าน-เขียนได้ :read-write เลือก <input> หรือ <textarea> ที่ไม่มี readonly และไม่ disabled ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:read-write { background-color: blue; color: white; } </style> </head&

ใช้ :link เพื่อจัดสไตล์ Link ที่ยังไม่เคยถูกเยี่ยมชม (Unvisited Links) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:link { background-color: orange; } </style> </head> <body> <a href=https://www.example.com>D

Pseudo-class :link ใช้ :link จัดสไตล์ลิงก์ที่ยังไม่เคยถูกคลิก (unvisited) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:link { background-color: orange; } </style> </head> <body> <a href="https://www.example.com">Demo

เลือกทุกอย่างยกเว้น selector ที่ระบุ ใช้ :not(selector) เพื่อเลือกองค์ประกอบที่ ไม่ตรงกับ selector ภายในวงเล็บ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { color: red; } :not(p) { color: blue; } </style> </head> <body> <h1>Heading

ใช้ :nth-child(n) เพื่อจัดสไตล์ <p> ตัวที่ n ของ Parent (นับลูกทุกประเภท) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:nth-child(4) { background: orange; color: white; } </style> </head> <body> &l

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

Pseudo-class :nth-child(n) ใช้ :nth-child(n) เลือกองค์ประกอบที่เป็นลูกคนที่ n ของพาเรนต์ (นับทุกชนิด) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:nth-child(4) { background: orange; color: white; } </style> </head> <body> <p

ใช้ :nth-last-of-type(n) เพื่อเลือก <p> ตัวที่ n นับจากล่าง (นับเฉพาะ Tag <p> เท่านั้น) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:nth-last-of-type(2) { background: blue; color: white; } </style> </hea

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

ตารางสรุปเมธอด 3D Transforms เมธอด คำอธิบาย matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)แปลงด้วยเมทริกซ์ 16 ค่า translate3d(x,y,z)ย้ายตามแกน X, Y, Z translateX(x)ย้ายตามแกน X translateY(y)ย้ายตามแกน Y translateZ(z)ย้ายตามแกน Z scaleX(x)ขยาย/ย่อตา

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

Pseudo-class :hover ใช้ :hover จัดสไตล์ลิงก์เมื่อเลื่อนเมาส์มาวางเหนือ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:hover { background-color: orange; } </style> </head> <body> <a href="https://www.google.com">Google&l

ใช้ :in-range เพื่อจัดสไตล์ <input type=number> ที่มีค่าอยู่ในช่วงที่กำหนด (min ถึง max) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:in-range { border: 3px dashed orange; background: yellow; } </style> </

ใช้ :invalid เพื่อจัดสไตล์ <input> ที่มีค่าไม่ถูกต้องตามประเภท (เช่น Email format ผิด) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:invalid { background: red; } </style> </head> <body> <h2>Heading&l

Pseudo-class :invalid ใช้ :invalid จัดสไตล์ <input> ที่มีค่าไม่ผ่านการตรวจสอบ (เช่น email ไม่ถูกต้อง) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:invalid { background: red; } </style> </head> <body> <h2>Heading</h

ใช้ :lang() เพื่อจัดสไตล์ Element ที่มี Attribute lang ตรงกับภาษาที่ระบุ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:lang(fr) { background: green; } </style> </head> <body> <p>This is my country</p>