Lv.3 CSS Selectors

CSS Selectors เป็นการเลือกอิลิเมนต์(แท็ก)ด้วยวิธีต่าง

• เลือกจากชื่อแท็ก
• เลือกจาก Id
• เลือกจาก Class
• เลือกทุกอิลิเมนต์
• เลือกแบบเฉพาะเจาะจง
• เลือกเป็นกลุ่ม

CSS Selectors เลือกอิลิเมนต์ด้วย Tag selector

การใช้ Selectors ขั้นพื้นฐานสุดๆ ก็คือการเลือกจากชื่อแท็ก

ตัวอย่าง

h1 {
	color: red;
	font-size: 36px;
}

p {
	text-align: center;
	font-size: 16px;
}

เลือกอิลิเมนต์ด้วย Id selector

การเลือกอิลิเมนต์แบบ Id จะมีค่า Id ที่ซ้ำกันไม่ได้

ตัวอย่าง

#wrap {
	margin: auto;
	width: 50%;
	height: 100vh;
	background-color: blue;
}

เลือกอิลิเมนต์ด้วย Class selector

ในหนึ่ง 1 อิลิเมนต์ จะมี Class หรือไม่มีก็ได้ หรือจะมีมากว่า 1 Class ก็ได้

ตัวอย่าง

.red {
	color: red;
}
			
.text-center {
	text-align: center;
}

จากตัวอย่างแท็ก h2 ตัวหนังสือสีดำ เพราะไม่ได้กำหนคลาส red ให้