Skip to main content

CSS Selector ของ CSS

ไอเดียของการเลือก Selector​

เนื่องจาก CSS เป็นคนละภาษากับ HTML (ถึงแม้จะอยู่ในไฟล์เดียวกันก็ตาม) ไอเดียของการ Select CSS จึงเป็น การเลือกเป็นยัง HTML ตัวที่ต้องการจะแต่งก่อน ก่อนที่จะใส่ style แต่งเข้าไป

ไอเดียของการ select จึงแบ่งออกเป็น 2 อย่างคือ

  1. เลือกแต่งใคร (html tag หรือ DOM ตัวไหน)
  2. แต่งอะไรใส่ html นั้น

เราจะเริ่มจากข้อ 1. ก่อน มาดูไอเดียเบื้องต้นของการ Select ไปยัง HTML กัน

Selector แต่ละประเภท​

เบื้องต้นผมจะแชร์เป็น 3 วิธีที่ง่ายที่สุดในการเลือก html ก่อน (เรื่องการแต่ง style เราจะมาลงลึกกันอีกที ตอนนี้ผมจะลองให้้เห็นภาพการจิ้ม HTML ก่อน)

1. Select ด้วย html ตรงๆ​

คือการระบุ tag html ตรงๆเพื่อทำการ select

Pattern สำหรับการเลือกคือ

(tag html) {
  /* ใส่ style ตรงนี้  */
}

ตัวอย่างการใช้การ เราจะลองเพิ่มพื้นหลังสีน้ำเงินเข้าไปให้กับ tag body (css สำหรับระบายสีพื้นหลังคือ background-color)

<html>
  <head>
    <style>
      body {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Hello world
  </body>
</html>

ผลลัพธ์ของ code นี้คือ

select-1

2. Select ไปยัง id ของ html​

คือการระบุ id attribute ของ html นั้นเพื่อทำการ select ไปยัง html นั้น

Pattern สำหรับการเลือกคือ

#(id ที่ต้องการเลือก) {
  /* ใส่ style ตรงนี้  */
}

ตัวอย่างการใช้งาน ลองเพิ่มขนาดตัวอักษรเป็นขนาด 40px (css สำหรับเพิ่มขนาด font คือ font-size)

<html>
  <head>
    <style>
      /* เพิ่ม CSS selector id = test เข้าไป */
      #test {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <!-- ระบุ id เป็น attribute ของ html นั้น -->
    <div id="test">ตัวอักษร</div>
  </body>
</html>

ผลลัพธ์ของ code นี้คือ

select-2

3. Select ไปยัง class ของ html​

คือการระบุ class attribute ของ html นั้นเพื่อทำการ select ไปยัง html นั้น

Pattern สำหรับการเลือกคือ

.(class ที่ต้องการเลือก) {
  /* ใส่ style ตรงนี้  */
}

ตัวอย่างการใช้งาน ลองเพิ่มสีตัวอักษรข้อความที่อยู่ใน list ทั้งหมด (css สำหรับเพิ่มสีคือ color)

<html>
  <head>
    <style>
      .item {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="item">item ที่ 1</li>
      <li class="item">item ที่ 2</li>
      <li class="item">item ที่ 3</li>
      <li class="item">item ที่ 4</li>
    </ul>
  </body>
</html>

ผลลัพธ์ของ code นี้คือ

select-3

เราจะเรียกสิ่งนี้ทั้งหมดว่า CSS Selector คือ วิธีการ Select ไปยัง HTML ของ CSS ซึ่งตลอด Session นี้เราจะใช้วิธี Selector 3 วิธีนี้ผสมๆกันในหัวข้อต่อไป