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

ตำแหน่งคงที่ (Static Positioning) position: static เป็นค่าเริ่มต้น องค์ประกอบจะอยู่ตามลำดับปกติของเอกสาร คุณสมบัติ top, right, bottom, left ไม่มีผล ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.static { position: static; border: 3px solid blue; }

ตำแหน่งสัมพัทธ์ (Relative Positioning) position: relative ย้ายองค์ประกอบจากตำแหน่งปกติโดยใช้ top, right, bottom, left โดยไม่ส่งผลต่อองค์ประกอบอื่น ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { position: relative; left: 20px; border: 3px solid b

คุณสมบัติ z-index ใช้ z-index ควบคุมลำดับการซ้อนขององค์ประกอบที่มี position ไม่ใช่ static ค่าต่ำกว่าจะอยู่ด้านหลัง ตัวอย่าง: วางภาพด้านหลังข้อความ <!DOCTYPE html> <html> <head> <style> img { position: absolute; left: 0px; top: 0px; z-index: -1;

ใช้ text-align: center บน li กำหนด text-align: center ให้ <li> เพื่อจัดลิงก์ให้อยู่กึ่งกลางในแถบนำทางแนวตั้ง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; } li a {

คุณสมบัติ border-left-width ใช้ border-left-width เพื่อกำหนดความหนาเฉพาะเส้นขอบซ้าย ต้องมี border-style ด้วย ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { border-style: dashed; border-left-width: 10px; } </style> </head> <body>

คุณสมบัติ border-color ใช้ border-color ร่วมกับ border-style เพื่อกำหนดสีเส้นขอบทั้ง 4 ด้าน (บน, ขวา, ล่าง, ซ้าย) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { border-style: dashed; border-color: #808000 #800000 #FF0000 #FFFF00; /* top right bottom lef

คุณสมบัติ border-right-color ใช้ border-right-color เพื่อกำหนดสีเฉพาะเส้นขอบขวา ต้องกำหนด border-style ก่อน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { border-style: dotted; border-right-color: #FFFF00; } </style> </head> <body&g

สืบทอดค่า margin จากพาเรนต์ ใช้ margin: inherit เพื่อให้องค์ประกอบลูกใช้ค่า margin เดียวกับพาเรนต์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; margin-left: 50px; } p.ex1 { margin-left: inherit; } </sty

จัดกึ่งกลางบล็อกด้วย margin: auto กำหนด width ให้องค์ประกอบ แล้วใช้ margin: auto จะทำให้มันอยู่กึ่งกลางแนวนอนภายในพาเรนต์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { width: 200px; margin: auto; border: 2px dashed blue; } </style>

ใช้หน่วย % สำหรับ width และ height กำหนด width: 50% และ height: 50% เพื่อทำให้ภาพปรับขนาดตามพาเรนต์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> img { height: 50%; width: 50%; } </style> </head> <body> <p>Sized image in %&l

คุณสมบัติ min-width และ max-width ใช้ min-width และ max-width เพื่อควบคุมความกว้างขององค์ประกอบ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { max-width: 300px; min-width: 100px; background-color: red; } </style> </head> <bo

คุณสมบัติ min-height และ max-height ใช้ min-height และ max-height เพื่อจำกัดความสูงขององค์ประกอบ ให้องค์ประกอบไม่เล็กหรือใหญ่เกินไป ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { max-height: 550px; min-height: 450px; background-color: red; }

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

Pseudo-classes สำหรับลิงก์ ใช้ :link, :visited, :hover, :active เพื่อจัดสไตล์ลิงก์ในแต่ละสถานะ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a.first:link { color: #ff0000; } a.first:visited { color: #0000ff; } a.first:hover { color: #ffcc00; } a.second:lin

เมธอด rotateZ() ใช้ rotateZ(angle) เพื่อหมุนองค์ประกอบรอบแกน Z (แกนที่ตั้งฉากกับหน้าจอ) ตัวอย่าง <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-transform: ro

Pseudo-class :in-range ใช้ :in-range selector เพื่อจัดสไตล์ <input> ที่มีแอตทริบิวต์ min และ max และค่าที่ป้อนอยู่ในช่วงนั้น ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:in-range { border: 3px dashed orange; background: yellow; } </st

คุณสมบัติ vertical-align ใช้ vertical-align เพื่อจัดตำแหน่งภาพเทียบกับข้อความรอบๆ ค่าที่นิยม: baseline, top, middle, bottom, text-top, text-bottom ตัวอย่าง <!DOCTYPE html> <html> <head> <style> img { vertical-align: text-bottom; } </style> </head&g

หน่วย px กับคุณสมบัติ font-size ใช้หน่วย px เพื่อกำหนดขนาดตัวอักษรแบบคงที่ (fixed size) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h1 { font-size: 30px; } </style> </head> <body> <h1>This is demo heading</h1> <p>T

หน่วย vw (viewport width) ใช้หน่วย vw เพื่อกำหนดขนาดตัวอักษรที่ปรับตามความกว้างของวิวพอร์ต 1vw = 1% ของความกว้างวิวพอร์ต ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h1 { font-size: 8vw; } </style> </head> <body> <h1>This is demo