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

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

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

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) เปิดดู 587 ครั้ง

จากผลลัพธ์เราจะเห็นว่า 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) เปิดดู 587 ครั้ง

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

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 19 และ บุคคลทั่วไป 0 ท่าน