Lv.11 CSS Descendent Selector

CSS Descendent Selector เป็นการเลือกโดยอ้างอิงจากโครงสร้างการจัดเรียงอิลิเมนต์บนเว็บเพจ เช่น ภายในแท็ก <div> อาจจะประกอบไปด้วยแท็ก <p> จำนวนหนึ่ง โดยมีเงื่อนไขว่า แท็ก <p> จะอยู่ในลำดับชั้นย่อยที่เท่าไหร่ก็ได้ ไม่จำเป็นต้องอยู่ในลำดับชั้นที่ติดกับแท็ก <div>

Syntax

ชื่อแท็ก หรือ id หรือ class เว้นวรรคตามด้วย ชื่อแท็ก หรือ class เท่านั้น (id ใช้ไม่ได้เพราะกำหนดได้แค่ชื่อเดียว){
	Property1: Value;
	Property2: Value;
}

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Descendent Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			.div .p1 {
				text-align: center;
				color: red;
				font-size: 14px;
			}
		</style>

	</head>
	<body>
	
		<div class="div">
			<main>
				<article>
					<p class="p1">พารากราฟ 1</p>
				</article>
			</main>
			
			<aside>
				<p class="p1">พารากราฟ 2</p>
			</aside>
		
			<footer>
				<p class="p1">พารากราฟ 3</p>
			</footer>
		</div>
		
	</body>
</html>

สิ่งสำคัญในการใช้ CSS Descendent Selector คือเลือกอิลิเมนต์ตามลำดับโครงสร้าง โดยใช้การเว้นวรรคแยกชื่ออิลิเมนต์ ระวังอย่าเขียนผิดจาก div a {…} เป็น a div {…} เพราะการอ้างโครงสร้างลำดับชั้นผิด อาจนำไปสู่ความหายนะนะ

Top