เราใช้ adjacent sibling selector (+) หากต้องการจับคู่อิลิเมนต์ที่เกิดขึ้นทันทีหลังจาก selector แรก ทั้งสอง selector เป็นลูกของพาเรนต์เดียวกัน ไวยากรณ์ Adjacent Sibling Combinator Selector + Selector { attribute: /*value*/ } หากต้องการเลือกพี่น้องของพาเรนต์เดียวกันโดยไม่คำนึงถึงตำแหน่งของอิลิเม

CSS child combinator) ใช้สำหรับเลือกอิลิเมนต์ลูกทั้งหมดขององค์ประกอบพาเรนต์ ไวยากรณ์ Child Combinator Selector > Selector { attribute: /*value*/ } CSS descendant combinator (space) ใช้สำหรับเลือกอิลิเมนต์หลาน (descendants) ทั้งหมดขององค์ประกอบพาเรนต์ ไวยากรณ์ Descendant Combinator Selector

หากเราต้องการจัดรูปแบบองค์ประกอบพาเรนต์ (parent) เมื่อมีลูก (child) ได้รับโฟกัส เราจะใช้ CSS :focus-within pseudo-class ตัวอย่างที่ 1: ฟอร์มที่เปลี่ยนสีเมื่อโฟกัส <!DOCTYPE html> <html> <head> <style> form { margin: 2%; padding: 2%; display: flex; flex-direct

คุณสมบัติ object-fit และ object-position ใน CSS ช่วยให้เราสามารถครอปภาพและระบุวิธีการแสดงภาพในองค์ประกอบได้ ไวยากรณ์ (Syntax) Selector { object-fit: /*value*/ object-position: /*value*/ } ตัวอย่างที่ 1: cover และ contain <!DOCTYPE html> <html> <head> <style> img

เราสามารถจัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบได้โดยใช้ attribute data-* ตัวอย่างต่อไปนี้แสดงการใช้งาน data-* attribute ใน CSS ตัวอย่างที่ 1: การใช้กับ JavaScript <!DOCTYPE html> <html> <head> <style> dl { margin: 2%; } p { width: 60%; background-color: li

เพื่อปิดใช้งานการจับตำแหน่งเลื่อน (scroll anchoring) เริ่มต้นที่เบราว์เซอร์ให้ เราสามารถใช้คุณสมบัติ overflow-anchor ได้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { overflow-anchor: none; } div{ display: flex; flex-direction: row; } </style>

ด้วยคุณสมบัติ pointer-events ใน CSS เราสามารถควบคุมได้ว่าจะอนุญาตให้เมาส์และการสัมผัสทำงานบนองค์ประกอบหรือไม่ ไวยากรณ์ (Syntax) pointer-events: auto|none; โดยที่: auto (ค่าเริ่มต้น): องค์ประกอบตอบสนองต่อเหตุการณ์พอยน์เตอร์ none: องค์ประกอบไม่ตอบสนองต่อเหตุการณ์พอยน์เตอร์ ตัวอย่างที่ 1: การปิดใช้

สำหรับการเปลี่ยนสีของเคอร์เซอร์ (insertion caret) ใช้คุณสมบัติ caret-color ใน CSS ตัวอย่างที่ 1: การตั้งสีเคอร์เซอร์แบบกำหนดเอง <!DOCTYPE html> <html> <head> <style> form { padding: 2%; margin: 2%; text-align: center; } form:focus-within { box-shadow: 0 0 1

คุณสมบัติ tab-size ใน CSS ช่วยให้เราตั้งค่าปริมาณช่องว่างที่ใช้ในแท็บได้ ตัวอย่างต่อไปนี้แสดงการใช้งานคุณสมบัติ tab-size ตัวอย่างที่ 1: การเปรียบเทียบขนาดแท็บ <!DOCTYPE html> <html> <head> <style> body { display: flex; flex-direction: column; } p { white-space

คุณสมบัติ text-justify ใน CSS ช่วยระบุประเภทการจัดเรียงข้อความสำหรับองค์ประกอบหนึ่งๆ ส่วนคุณสมบัติ text-align ใช้ตั้งค่าการจัดแนวข้อความแนวนอนในองค์ประกอบ ตัวอย่างที่ 1: การใช้ inter-character <!DOCTYPE html> <html> <head> <style> article { margin: 3%; background-c

ด้วยคุณสมบัติ hyphens ใน CSS เราสามารถระบุวิธีการเพิ่มเครื่องหมายยูนิโค้ด (hyphens) ในข้อความได้ ตัวอย่างที่ 1: การเปรียบเทียบ none และ manual <!DOCTYPE html> <html> <head> <style> div { width: 20%; border: 2px groove lime; margin: 10px; padding: 10px; hyp

คุณสมบัติ text-indent ใน CSS ช่วยให้เราระบุปริมาณช่องว่างสำหรับการเยื้องข้อความได้ ตัวอย่างที่ 1: การเยื้องพื้นฐาน <!DOCTYPE html> <html> <head> <style> p { text-indent: 15%; } article { background-color: darkgray; margin: 2%; } </style> </head>

ด้วยการนำคุณสมบัติ text-decoration ใหม่ๆ มาใช้งาน เราสามารถจัดรูปแบบข้อความได้หลากหลายมากกว่าเดิม คุณสมบัติ text-decoration เป็น shorthand สำหรับ text-decoration-thickness, text-decoration-color, text-decoration-line และ text-decoration-style ส่วน text-decoration-skip, text-decoration-skip-ink, text

การเปลี่ยนสีข้อความและสีพื้นหลังของหน้าเว็บ ช่วยให้เราสามารถเพิ่มฟีเจอร์โหมดมืด (Dark Mode) และโหมดสว่าง (Light Mode) ให้กับเว็บไซต์ได้อย่างง่ายดาย ไวยากรณ์ (Syntax) ใช้รูปแบบต่อไปนี้เพื่อใช้งานโหมดมืด: Selector { color: white; background-color: black } ตัวอย่างที่ 1: การสลับโหมดพื้นฐาน <

เราสามารถเปลี่ยนพฤติกรรมการเลื่อนเกินขอบเขตหน้าเว็บด้วยคุณสมบัติ CSS overscroll-behavior ซึ่งสามารถปิดใช้งาน Pull-to-Refresh บนเบราว์เซอร์มือถือได้ ไวยากรณ์ Selector { overscroll-behavior: /*value*/ } ตัวอย่างที่ 1: ใช้กับคอนเทนเนอร์เฉพาะ <!DOCTYPE html> <html> <head> <style>

เพื่อช่วยให้นักพัฒนาปรับแต่งเว็บไซต์ด้วยการผสมผสาน JavaScript และ CSS คุณสมบัติ CSS ใหม่ๆ ได้รับการพัฒนาและรองรับในเบราว์เซอร์ยอดนิยม สรุปคุณสมบัติสำคัญดังนี้: focus-within แก้ปัญหา accessibility การโฟกัสภายในองค์ประกอบ scroll-snap เปิดใช้งานการเลื่อนและการชะลอแบบเนทีฟ (native scroll snap) @media (

ใช้ pseudo-class :not() ของ CSS เพื่อคัดเลือกองค์ประกอบที่ไม่ตรงกับเงื่อนไขที่กำหนด ตัวอย่างที่ 1: เลือก <p> ที่ไม่ได้อยู่ใน <div> <!DOCTYPE html> <html> <head> <style> p {    background-color: cornflowerblue;    color: white; } p:not(div>p

โดยการตั้งค่า position: sticky และ top: 0 เราสามารถสร้างหัวตารางที่ติดตลอดเมื่อเลื่อนลงได้ ตัวอย่างที่ 1: ตารางพร้อมเนื้อหาเพิ่มเติม <!DOCTYPE html> <html> <head> <style> div {    color: white;    display: flex;    padding: 2%;    back

Pseudo-class (คลาสปลอม) Pseudo-class แทนสถานะของ selector เช่น :hover, :active, :last-child เริ่มต้นด้วยเครื่องหมายโคลนเดี่ยว : :pseudo-class{ attribute: /*value*/ } Pseudo-element (องค์ประกอบปลอม) Pseudo-element ใช้เลือกองค์ประกอบเสมือนจริง เช่น ::after, ::before, ::first-line เริ่มต้นด้วยเครื่องห

ใช้ pseudo-element ::placeholder เพื่อเปลี่ยนสีข้อความ placeholder ในช่องกรอกข้อความ ไวยากรณ์ ::placeholder { attribute: /*value*/ } ตัวอย่างที่ 1: เปลี่ยนสีเฉพาะช่องกรอกลำดับคู่ <!DOCTYPE html> <html> <head> <style> input:last-child::placeholder {    color: cornfl