รู้จักกับ CSS Selector พื้นฐาน

ยินดีต้อนรับสู่บทแรกของซีรีส์เรียนรู้ CSS! ในบทนี้ เราจะมาทำความเข้าใจเกี่ยวกับ CSS Selector ซึ่งเป็นหัวใจสำคัญของการจัดรูปแบบเว็บไซต์ด้วย CSS Selector คือตัวที่ใช้ "เลือก" HTML Element ที่เราต้องการจะตกแต่งหรือปรับเปลี่ยนสไตล์

ลองนึกภาพว่า CSS Selector เป็นเหมือนนิ้วที่ชี้ไปยัง Element ที่เราต้องการจะเปลี่ยนสี เปลี่ยนขนาด หรือจัดวางตำแหน่ง ถ้าเราชี้ผิด Element ก็จะไม่ได้รับการเปลี่ยนแปลงที่เราต้องการ ดังนั้นการเข้าใจ CSS Selector จึงสำคัญมาก

ในบทนี้ เราจะเน้น Selector พื้นฐานที่ใช้บ่อยที่สุด 3 แบบ ได้แก่:

• Element Selector
• Class Selector
• ID Selector

Element Selector

Element Selector เป็น Selector ที่ง่ายที่สุด มันจะเลือก Element ทั้งหมดที่มีชื่อ Tag เดียวกัน เช่น ถ้าเราต้องการเปลี่ยนสีตัวอักษรของ Paragraph ทั้งหมดในหน้าเว็บ เราจะใช้ Element Selector

ตัวอย่าง:

p {
  color: blue;
}

โค้ด CSS ด้านบนจะเปลี่ยนสีตัวอักษรของ Paragraph (<p>) ทุกอันในหน้าเว็บให้เป็นสีน้ำเงิน

ตัวอย่าง HTML:

<p>นี่คือ Paragraph แรก</p>
<p>และนี่คือ Paragraph ที่สอง</p>

ผลลัพธ์:

นี่คือ Paragraph แรก

และนี่คือ Paragraph ที่สอง

จะเห็นว่า Paragraph ทั้งสองอันมีสีตัวอักษรเป็นสีน้ำเงิน เพราะเราใช้ Element Selector (p) เพื่อเลือก Paragraph ทั้งหมด

Class Selector

Class Selector ช่วยให้เราเลือก Element ที่มี Class Attribute ที่กำหนดไว้ Class Attribute เป็น Attribute ที่เราสามารถกำหนดให้กับ Element ใดๆ ก็ได้ใน HTML เพื่อใช้ในการจัดกลุ่ม Element ที่มีความคล้ายคลึงกัน

Class Selector จะเริ่มต้นด้วยเครื่องหมายจุด (.) ตามด้วยชื่อ Class ที่เราต้องการเลือก

ตัวอย่าง:

.highlight {
  background-color: yellow;
}

โค้ด CSS ด้านบนจะกำหนดพื้นหลังสีเหลืองให้กับ Element ที่มี Class Attribute ชื่อว่า highlight

ตัวอย่าง HTML:

<p>นี่คือ Paragraph ธรรมดา</p>
<p class="highlight">นี่คือ Paragraph ที่ถูก Highlight</p>
<p>นี่คือ Paragraph อีกอัน</p>

ผลลัพธ์:

นี่คือ Paragraph ธรรมดา

นี่คือ Paragraph ที่ถูก Highlight

นี่คือ Paragraph อีกอัน

จะเห็นว่าเฉพาะ Paragraph ที่มี class="highlight" เท่านั้นที่มีพื้นหลังสีเหลือง

ข้อดีของ Class Selector:

• สามารถใช้ Class เดียวกันกับ Element หลายอันได้
• ช่วยให้เราจัดกลุ่ม Element ที่มีความคล้ายคลึงกันได้ง่าย

ID Selector

ID Selector คล้ายกับ Class Selector แต่มีความแตกต่างที่สำคัญคือ ID Attribute ควรมีค่าที่ไม่ซ้ำกันในหน้าเว็บหนึ่งๆ (unique) นั่นหมายความว่าเราควรใช้ ID Selector เมื่อต้องการเลือก Element เพียงตัวเดียวในหน้าเว็บ

ID Selector จะเริ่มต้นด้วยเครื่องหมาย Hash (#) ตามด้วยชื่อ ID ที่เราต้องการเลือก

ตัวอย่าง:

#main-title {
  font-size: 24px;
  font-weight: bold;
}

โค้ด CSS ด้านบนจะกำหนดขนาดตัวอักษรเป็น 24px และทำให้ตัวอักษรเป็นตัวหนา สำหรับ Element ที่มี ID Attribute ชื่อว่า main-title

ตัวอย่าง HTML:

<h1 id="main-title">ยินดีต้อนรับสู่เว็บไซต์ของเรา!</h1>
<p>เนื้อหาของเว็บไซต์...</p>

ผลลัพธ์:

ยินดีต้อนรับสู่เว็บไซต์ของเรา!

เนื้อหาของเว็บไซต์...

จะเห็นว่าเฉพาะ Heading (<h1>) ที่มี id="main-title" เท่านั้นที่มีขนาดตัวอักษรใหญ่และเป็นตัวหนา

ข้อควรระวังในการใช้ ID Selector:

• ID Attribute ควรมีค่าที่ไม่ซ้ำกันในหน้าเว็บหนึ่งๆ
• หลีกเลี่ยงการใช้ ID Selector มากเกินไป เพราะอาจทำให้ CSS ของคุณซับซ้อนและยากต่อการบำรุงรักษา

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ CSS Selector พื้นฐาน 3 แบบ ได้แก่:

• Element Selector: เลือก Element ทั้งหมดที่มีชื่อ Tag เดียวกัน
• Class Selector: เลือก Element ที่มี Class Attribute ที่กำหนดไว้
• ID Selector: เลือก Element ที่มี ID Attribute ที่กำหนดไว้ (ควรมีค่าที่ไม่ซ้ำกัน)

การเข้าใจ CSS Selector เป็นสิ่งสำคัญมากในการจัดรูปแบบเว็บไซต์ด้วย CSS ลองฝึกฝนการใช้งาน Selector ต่างๆ เหล่านี้กับโปรเจกต์เล็กๆ เพื่อให้เข้าใจการทำงานของมันอย่างถ่องแท้ ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน CSS ในรูปแบบต่างๆ (Inline, Internal และ External)

ขอให้สนุกกับการเขียน CSS!