Lv.13 CSS Adjacent Selector

Posted on by alsoon

CSS Adjacent Selector เป็นการเลือกอิลิเมนต์ในลำดับชั้นที่ติดกัน และต้องอยู่ภายใต้ Parent element เดียวกัน โดยใช้เครื่องหมาย + คั่นระหว่างอิลิเมนต์ทั้งสอง

Syntax

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

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Adjacent 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>
			h1 + p {
				color: red;
				text-align: center;
			}
			
			#p1 + .p2 {
				color: red;
				text-align: center;
			}
		</style>

	</head>
	<body>
	
		<main>
			<article>
				<h1>หัวเรื่อง h1</h1>
				<p>พารากราฟ 1</p>
				<p id="p1">พารากราฟ 2</p>
				<p class="p2">พารากราฟ 3</p>
			</article>
		</main>
		
	</body>
</html>

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top