ใช้ CSS Pseudo-class :checked เพื่อจัดสไตล์ <input> ทุกตัวที่ถูกเลือก (Checked) เช่น Checkbox, Radio button ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:checked { height: 20px; width: 20px; } </style> </he

ตำแหน่งคงที่เทียบกับ viewport position: fixed ทำให้องค์ประกอบอยู่ตำแหน่งเดิมบนหน้าจอแม้จะเลื่อนสกรอลล์ ใช้ top, right, bottom, left กำหนดตำแหน่ง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { position: fixed; bottom: 0; right: 0; width: 20

Pseudo-class :checked ใช้ :checked เพื่อจัดสไตล์ checkbox หรือ radio button ที่ถูกเลือก ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:checked { height: 20px; width: 20px; } </style> </head> <body> <p>Fav sports:</p&

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

จัดสไตล์อินพุตที่ปิดใช้งาน ใช้ :disabled selector เพื่อจัดสไตล์ <input> ที่มีแอตทริบิวต์ disabled ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:enabled { background: blue; } input:disabled { background: red; } </style> </head> <body>

แสดงเนื้อหาที่ล้น (ค่าเริ่มต้น) overflow: visible ไม่ตัดเนื้อหา เนื้อหาจะล้นออกมานอกกล่อง นี่คือค่าเริ่มต้น ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { background-color: orange; width: 250px; height: 30px; border: 2px solid blue;

ซ่อนเนื้อหาที่ล้น overflow: hidden ตัดเนื้อหาที่เกินพื้นที่ออกไป ไม่แสดง scrollbar ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { background-color: orange; width: 250px; height: 35px; border: 2px solid blue; overflow: hidden; }

แสดง scrollbar ตลอดเวลา overflow: scroll ตัดเนื้อหาที่ล้นและแสดง scrollbar ทั้งแนวนอนและแนวตั้งตลอดเวลา ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { background-color: orange; width: 250px; height: 45px; border: 2px solid blue; over

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

แสดง scrollbar เมื่อจำเป็น overflow: auto จะเพิ่ม scrollbar ก็ต่อเมื่อเนื้อหาล้น ไม่เหมือน overflow: scroll ที่แสดงตลอดเวลา ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { background-color: orange; width: 250px; height: 45px; border: 2px so

ควบคุมการล้นแนวตั้ง overflow-y จัดการเนื้อหาที่ล้นออกไปทางบน-ล่าง ค่าเหมือน overflow-x ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { background-color: orange; width: 250px; height: 45px; border: 2px solid blue; overflow-x: hidden;

ควบคุมการล้นแนวนอน overflow-x จัดการเนื้อหาที่ล้นออกไปทางซ้าย-ขวา ค่า: visible, hidden, scroll, auto ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { background-color: orange; width: 250px; height: 45px; border: 2px solid blue; overflo

คุณสมบัติ float ใช้ float: right หรือ float: left เพื่อจัดวางองค์ประกอบชิดขอบขวาหรือซ้าย เนื้อหาอื่นจะพับล้อมรอบ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo { float: right; width: 200px; border: 1px dashed blue; padding: 5px; } &l

ใช้ padding บนและล่าง วิธีง่ายคือกำหนด padding-top และ padding-bottom เท่ากันให้พาเรนต์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .center { padding: 50px 0; border: 2px solid blue; } </style> </head> <body> <h2>Center Ve

เลือกเฉพาะลูกโดยตรง ใช้ p เพื่อเลือก <p> ที่เป็นลูกโดยตรงของ <div> ไม่รวมหลาน ตัวอย่าง p { background-color: orange; } </style> </head> <body> <div> <p>Para 1 in the div.</p> <!-- This is not a Child --> <span>&

จัดสไตล์ลิงก์ให้ดูเหมือนปุ่ม ใช้ display: inline-block, padding, border และ pseudo-classes เพื่อสร้างปุ่มลิงก์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: white; color: black; border: 1px solid blue; padd

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

border-left ให้ ul ใช้ border-left: 3px solid blue เพื่อสร้างเส้นขอบซ้ายสีน้ำเงินให้รายการ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { border-left: 3px solid blue; background-color: gray; } </style> </head> <body> <p>

list-style-type: none และ border ใช้ list-style-type: none เพื่อซ่อนจุดนำหน้า และเพิ่ม border ให้ <ul> ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { background-color: orange; padding: 10px 20px; list-style-type: none; border: 2px sol

display: none ซ่อนองค์ประกอบและ ไม่ครอบครองพื้นที่ ในเลย์เอาต์ องค์ประกอบอื่นจะปิดช่องว่าง <!DOCTYPE html> <html> <head> <style> h3 { display: none; } </style> </head> <body> <h2>This heading is visible</h2> <h3>This is a hidde