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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: CSS Tips : การกำหนดCSS property ใน first-child selector

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

โดย abdkode » 26/03/2019 3:08 pm

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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

<!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 1165 times
จากผลลัพธ์เราจะเห็นว่า tag <p> เฉพาะตัวแรกเท่านั้นที่จะเปลี่ยนตามที่กำหนดใน css style ถ้าหากเราดูตรง tag <p> ตัวที่สอง คือ <p>php</p>ซึ่งได้เปลี่ยนสีด้วยนั้น เพราะมันอยู่ ใน teg <div> อีกทีหนึง ซึ่งจะนับเป็นคนละกลุ่ม หรือคนละส่วนกันกับ tag <p> ตัวเแรก จึงทำให้ tag <p> ตัวแรกที่อยู่คนละส่วนจะถูกนับไปด้วย

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

โค้ด: เลือกทั้งหมด

<!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 1165 times
ผลลัพธ์ตัวอย่างนี้ก็เช่นเดียวกัน เราได้กำหนด css ใน li:first-child คือจะเลือกเฉพาะ <li>...</li> ตัวแรกเท่านั้น ในที่นี้คือ <li>Data Structure</li> และ <li>Java</li> ครับ

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

ข้างบน