ป้ายกำกับ: Child Selector คือ

Lv.12 CSS Child Selector

Posted on by alsoon

CSS Child Selector มีลักษณะคล้ายกับกับการเลือกอิลิเมนต์จาก Descendent selector คือเลือกอิลิเมนต์จากลำดับโครงสร้างของเว็บเพจ แต่สิ่งที่แตกต่างคือ เลือกเฉพาะ Child element ที่ติดกับ Parent element เท่านนั้น และไม่มีผลไปยังลูกหลาน ในลำลับชั้นที่ลึกลง โดยใช้เครื่องหมาย > คั่นระหว่างชั้น

Syntax

ชื่อid หรือ class หรือแท็ก {
	Property1: Value;
	Property2: Value;
}

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Child 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>
			article>p {
				text-align: center;
				color: red;
				font-size: 14px;
			}
			
			#aside>p {
				text-align: center;
			}
			
			
			.f1>p {
				text-align: right;
				color: blue;
			}
		</style>

	</head>
	<body>
	
		<div>
			<main>
				<article>
					<p>พารากราฟ 1</p>
					<footer>
						<p>พารากราฟ 1.1</p>
					</footer>
					<p>พารากราฟ 2</p>
				</article>
			</main>
			
			<aside id="aside">
				<p>พารากราฟ 3</p>
			</aside>
		
			<footer class="f1">
				<p>พารากราฟ 4</p>
			</footer>
		</div>
		
	</body>
</html>
Top