CSS Tips : การกำหนดCSS property ใน first-child selector

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

CSS Tips : การกำหนดCSS property ใน first-child selector

Post by abdkode » 26/03/2019 3:08 pm

first-child selector ถูกใช้เพื่อเลือกองค์ประกอบ(element)ในจำพวกเดี่ยวกันและเป็นองค์ประกอบตัวแรก ถ้าเป็นเบราเซอร์ IE8 และรุ่นก่อนหน้า จะใช้งาน :first-child selector ได้จะต้องประกาศ <! DOCTYPE> ด้วย
รูปแบบการกำหนด CSS property

Code: Select all

:first-child {
    // CSS property
}
ตัวอย่างโค้ดการกำหนด :first-child ดังนี้

Code: Select all

<!DOCTYPE html> 
<html> 
	<head> 
		<title>first child selector</title> 
		<style> 
			h1 { 
				color:blue; 
			} 
			p:first-child { 
				background-color: navy; 
				color:white; 
				font-weight:bold; 
			} 
			body { 
				text-align:center; 
			} 
		</style> 
	</head> 
	<body> 
		<p>Mindphp</p> 
		<h1>Mindphp</h1> 
		<h2>:first-child Selctor</H2> 
		<p>Mindphp</p> 
		<div> 
			<p>php</p> 
			<p>ERP</p> 
		</div> 
	</body> 
</html>					 
ผลลัพธ์เมื่อเปิดผ่านเบราเซอร์ chrome
first-child.jpg
first-child.jpg (18.05 KiB) Viewed 688 times
จากผลลัพธ์เราจะเห็นว่า tag <p> เฉพาะตัวแรกเท่านั้นที่จะเปลี่ยนตามที่กำหนดใน css style ถ้าหากเราดูตรง tag <p> ตัวที่สอง คือ <p>php</p>ซึ่งได้เปลี่ยนสีด้วยนั้น เพราะมันอยู่ ใน teg <div> อีกทีหนึง ซึ่งจะนับเป็นคนละกลุ่ม หรือคนละส่วนกันกับ tag <p> ตัวเแรก จึงทำให้ tag <p> ตัวแรกที่อยู่คนละส่วนจะถูกนับไปด้วย

ตัวอย่างที่สอง

Code: Select all

<!DOCTYPE html> 
<html> 
	<head> 
		<title>first child selector</title> 
		<style> 
			h1 { 
				color:blue; 
			} 
			h1, h2 { 
				text-align:center; 
			} 
			li:first-child { 
				background: navy; 
				color:#aec4e8;
			} 
			body { 
				width:70%; 
			} 
		</style> 
	</head> 
	<body> 
		<h1>Mindphp</h1> 
		<h2>:first-child Selector</h2> 
		<ul> 
			<li>Data Structure</li> 
			<li>Computer Network</li> 
			<li>Operating System</li> 
		</ul> 
		<ol> 
			<li>Java</li> 
			<li>Ruby</li> 
			<li>Pascal</li> 
		</ol> 
	</body> 
</html>					 
ผลลัพธ์เมื่อเปิดผ่านเบราเซอร์ chrome
first-child2.jpg
first-child2.jpg (19.41 KiB) Viewed 688 times
ผลลัพธ์ตัวอย่างนี้ก็เช่นเดียวกัน เราได้กำหนด css ใน li:first-child คือจะเลือกเฉพาะ <li>...</li> ตัวแรกเท่านั้น ในที่นี้คือ <li>Data Structure</li> และ <li>Java</li> ครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 1 guest