Lv.14 CSS Attribute Selector

Posted on by alsoon

CSS Attribute Selector เป็นการเลือกอิลิเมนต์จากค่าแอตทริบิวต์(Attribute) หรือดูค่าที่ถูกกำหนดให้กับอิลิเมนต์นั้นๆ โดยใช้เครื่องก้ามปู […] ครอบชื่อแอตทริบิวต์

Syntax

ชื่อแท็ก หรือ id หรือ class[ชื่อแอตทริบิวต์] {
	Property1: Value;
	Property2: Value;
}

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Attribute 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[title] {
				color: red;
				text-align: center;
			}
			
			.p[style] {
				text-align: center;
			}
			
			#p1[title] {
				color: red;
				text-align: center;
			}
			
			img[src] {
				border: 5px solid gold;
			}
			
			img[width] {
				opacity: 0.5;
			}
			
			img[height] {
				cursor: pointer;
			}
		</style>

	</head>
	<body>
	
		<main>
			<article>
				<h1 title="H1">หัวเรื่อง h1</h1>
				<p class="p" style="color:blue;">พารากราฟ 1</p>
				<p>พารากราฟ 2</p>
				<p id="p1" title="ย่อหน้า">พารากราฟ 3</p>
				<img src="css.png" width="300" height="350">
			</article>
		</main>
		
	</body>
</html>

ใส่ความเห็น

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

Top