first-child selector ถูกใช้เพื่อเลือกองค์ประกอบ(
element)ในจำพวกเดี่ยวกันและเป็นองค์ประกอบตัวแรก ถ้าเป็นเบราเซอร์ IE8 และรุ่นก่อนหน้า จะใช้งาน :first-child selector ได้จะต้องประกาศ <! DOCTYPE> ด้วย
รูปแบบการกำหนด 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 (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 (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
[b]first-child selector[/b] ถูกใช้เพื่อเลือกองค์ประกอบ([url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2452-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5-9-html-element.html]element[/url])ในจำพวกเดี่ยวกันและเป็นองค์ประกอบตัวแรก ถ้าเป็นเบราเซอร์ IE8 และรุ่นก่อนหน้า จะใช้งาน :first-child selector ได้จะต้องประกาศ <! DOCTYPE> ด้วย
รูปแบบการกำหนด CSS property
[code]:first-child {
// CSS property
}[/code]
ตัวอย่างโค้ดการกำหนด :first-child ดังนี้
[code]<!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>
[/code]
ผลลัพธ์เมื่อเปิดผ่าน[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/33-google/3773-google-chrome-%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5-%E0%B9%82%E0%B8%84%E0%B8%A3%E0%B8%A1.html]เบราเซอร์ chrome[/url]
[attachment=1]first-child.jpg[/attachment]
จากผลลัพธ์เราจะเห็นว่า [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]tag[/url] <p> เฉพาะตัวแรกเท่านั้นที่จะเปลี่ยนตามที่กำหนดใน css style ถ้าหากเราดูตรง tag <p> ตัวที่สอง คือ <p>php</p>ซึ่งได้เปลี่ยนสีด้วยนั้น เพราะมันอยู่ ใน teg <div> อีกทีหนึง ซึ่งจะนับเป็นคนละกลุ่ม หรือคนละส่วนกันกับ tag <p> ตัวเแรก จึงทำให้ tag <p> ตัวแรกที่อยู่คนละส่วนจะถูกนับไปด้วย
[b]ตัวอย่างที่สอง [/b]
[code]<!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>
[/code]
ผลลัพธ์เมื่อเปิดผ่านเบราเซอร์ chrome
[attachment=0]first-child2.jpg[/attachment]
ผลลัพธ์ตัวอย่างนี้ก็เช่นเดียวกัน เราได้กำหนด css ใน li:first-child คือจะเลือกเฉพาะ <li>...</li> ตัวแรกเท่านั้น ในที่นี้คือ <li>Data Structure</li> และ <li>Java</li> ครับ
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]แลกเปลี่ยนความรู้ PHP[/url]