เมื่อเปรียบเทียบ CSS class vs ID ความแตกต่างคือ CSS class ใช้สไตล์กับหลาย elements ID ในทางกลับกัน ใช้สไตล์กับ element เดียวที่ unique ID ยังพิเศษที่คุณสามารถใช้ URL พิเศษลิงก์โดยตรงไปยัง element และมันถูกใช้โดย JavaScript
ใน CSS selectors ใช้เพื่อ target element เฉพาะหรือช่วงของ elements บนหน้าเว็บ เมื่อ element ถูก target แล้ว สไตล์หรือชุดของสไตล์สามารถนำไปใช้กับ element ได้
มี selectors หลากหลายให้เลือก สองตัวที่ใช้บ่อยที่สุดคือ class และ ID ทั้งคู่ใช้ target elements ที่สไตล์ควรนำไปใช้ แต่ selectors เหล่านี้มักสับสน ดังนั้นมา探索แต่ละตัวทำงานอย่างไร
CSS Class vs ID Selectors
ความแตกต่างระหว่าง selectors class และ ID คืออะไร? นี่คือคำถามที่นักพัฒนามือใหม่หลายคนถาม และเราจะตอบในคู่มือนี้
จนจบการอ่านคู่มือนี้ คุณจะรู้ความแตกต่างระหว่าง selectors สองตัวนี้ คุณจะมีข้อมูลที่ต้องการเพื่อตัดสินใจอย่างมีข้อมูลเกี่ยวกับ selector ไหนที่จะใช้ในโค้ดของคุณ เริ่มต้นกันเลย
CSS Selectors
เมื่อออกแบบหน้าเว็บ คุณจะต้องการสไตล์บางอย่างนำไปใช้กับ elements เฉพาะบนหน้า เช่น คุณอาจต้องการตั้งค่าสีข้อความของทั้งหมด <p> tags เป็นสีเขียว หรือเปลี่ยนขนาดฟอนต์ของ header
Selectors ช่วยให้คุณ target elements เฉพาะบนหน้าเว็บที่คุณสามารถนำสไตล์ไปใช้ได้ ใน CSS มี selectors หลายอย่าง เช่น universal selectors, descendant selectors, child selectors และ grouping selectors หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับ CSS selectors อ่านคู่มือ beginner's guide to CSS selectors ของเรา
Selectors สองตัว class และ id ใช้เพื่อนำสไตล์ไปใช้กับ elements ตาม class และ ID ที่กำหนดให้ HTML element ตามลำดับ แต่ selectors เหล่านี้มักสับสน ดังนั้นมา探索แต่ละตัวทำงานอย่างไร
ID Selector เป็น Unique (เฉพาะเจาะจง)
ID selector ช่วยให้คุณกำหนดกฎสไตล์ที่นำไปใช้กับ element เดียว บนหน้าเว็บ แต่ละหน้าเว็บสามารถมี element เดียวกับ single ID attribute เท่านั้น หมายความว่า ID selector ไม่เคยสามารถใช้จัดสไตล์มากกว่าหนึ่ง element
ID selectors ถูกกำหนดโดยใช้ hash sign พวกเขาตามทันทีด้วย ID value ที่คุณต้องการนำชุดกฎสไตล์ไปใช้ นี่คือตัวอย่าง ID selector ในการทำงาน:
<html> <p id="betaBanner">This is a banner.</p> <style> #betaBanner { color: white; background-color: orange; }
สไตล์นี้นำไปใช้กับ element <p> ในเอกสาร HTML ของเราที่มี ID betaBanner สไตล์จะตั้งค่าสีพื้นหลังของ element เป็นสีส้มและสีข้อความใน element เป็นสีขาว
Class Selector ไม่ Unique
Class selector ช่วยให้คุณกำหนดกฎสไตล์ที่นำไปใช้กับ element ใดๆ ที่มี class attribute เท่ากับค่าที่กำหนด
ตามที่เราพูดถึงก่อนหน้านี้ ID selector สามารถใช้จัดสไตล์ได้แค่ element เดียว เพราะ IDs สามารถใช้ได้เพียงครั้งเดียวบนหน้าเว็บ Classes ในทางกลับกัน สามารถใช้ข้ามหลาย elements ได้ ดังนั้น หากคุณนำสไตล์ไปใช้ด้วย class selector element ใดก็ตามที่แชร์ class นั้นจะถูกกระทบโดยสไตล์ที่คุณกำหนด
Class selectors ถูกกำหนดโดยใช้ period ตามด้วยค่าของ class ที่คุณต้องการนำชุดสไตล์ไปใช้ นี่คือตัวอย่าง class selector ในการทำงาน:
<html> <p class="orangeBackground">This is a banner.</p> <div class="orangeBackground">This is a banner.</div> <style> .orangeBackground { background-color: orange; }
สไตล์นี้ตั้งค่าสีพื้นหลังของ <p> tag ของเราเป็นสีส้ม นอกจากนี้ สไตล์ตั้งค่าสีพื้นหลังของ <div> tag ของเราเป็นสีส้ม เพราะทั้งสอง tags แชร์ class name เดียวกัน: orangeBackground
นอกจากนี้ web element สามารถแชร์ multiple classes ที่ต่างกันได้ ดังนั้น หากเราต้องการนำ class เรียกว่า large ไปใช้กับ <div> tag ด้านบน เราสามารถทำได้ด้วยโค้ดนี้:
<html> <div class="orangeBackground large">This is a banner.</div>
ในโค้ดนี้ กฎสไตล์ใดๆ ที่กำหนดสำหรับ classes orangeBackground และ large จะถูกนำไปใช้กับ web element ของเรา กับ ID ในทางกลับกัน เราไม่สามารถทำซ้ำพฤติกรรมนี้ได้ เพราะแต่ละ element สามารถมี ID ได้เพียงหนึ่งเดียว
IDs มี Browser Function เฉพาะตัว
จนถึงตอนนี้ เราพูดถึงว่า IDs สามารถนำสไตล์ไปใช้กับ element เดียวเท่านั้น ไม่เหมือน classes ที่สามารถนำสไตล์ไปใช้กับหลาย elements นี่ไม่ใช่ความแตกต่างเดียวระหว่าง class และ ID selectors
ในเบราว์เซอร์ classes ไม่มีฟังก์ชันพิเศษ เป้าหมายหลักคือให้คุณนำสไตล์ไปใช้กับช่วงของ elements บนหน้าเว็บ IDs ในทางกลับกัน สามารถใช้โดยเบราว์เซอร์นำทางไปยังส่วนหนึ่งของหน้าเว็บ
หากคุณกำหนด element ID คุณสามารถใช้ URL พิเศษลิงก์โดยตรงไปยัง element นั้น พฤติกรรมนี้ทำงานได้เพราะ IDs เป็น unique บนหน้าเว็บ
สมมติเราต้องการส่งลิงก์ไปยังเว็บไซต์ของเราที่เลื่อนผู้ใช้โดยอัตโนมัติไปยัง header เราสามารถทำได้ด้วยโค้ดนี้:
<h3 id="section3">Section Three</h3>
ในโค้ดนี้ เรากำหนด ID ให้ <h3> tag ที่มีข้อความ Section Three ตอนนี้ เราสามารถส่ง direct link ให้ผู้ใช้ที่เลื่อนพวกเขาไปยัง element นั้นบนหน้าเว็บ ทำได้โดยใช้ URL ต่อไปนี้:
https://domain.com/index.html#section3
เมื่อผู้ใช้นำทางไปยัง URL นี้ (โดยที่ domain.com คือ URL ของเว็บไซต์ของคุณ) พวกเขาจะเลื่อนไปยัง heading ที่มี ID section3 พฤติกรรมนี้ไม่ใช้กับ classes
IDs ถูกใช้โดย JavaScript
หากคุณมีประสบการณ์ใช้ JavaScript คุณจะรู้ว่า IDs มักใช้ในภาษาโปรแกรมมิ่งนั้น ฟังก์ชัน getElementById ช่วยให้คุณเลือก element บนหน้าเว็บ มันพึ่งพาข้อเท็จจริงที่ว่ามี element เดียวที่สามารถแชร์ ID เดียวกันได้
Classes ในทางกลับกัน สะท้อนหลาย elements บนหน้าเว็บ พวกเขาจะไม่มีประโยชน์หากคุณต้องการทำงานกับ element เฉพาะใน JavaScript
คุณสามารถใช้ทั้ง ID และ CSS Class Selectors ได้
ไม่มีกฎใน HTML ที่ป้องกันไม่ให้คุณกำหนด element ทั้ง ID และ class
"Career Karma เข้ามาในชีวิตฉันเมื่อฉันต้องการมันมากที่สุด และช่วยจับคู่ฉันกับ bootcamp ได้อย่างรวดเร็ว สองเดือนหลังจบ ฉันพบงานฝันที่สอดคล้องกับค่านิยมและเป้าหมายในชีวิต!"
Venus, Software Engineer at Rockbot
Find Your Bootcamp Match
สมมติคุณต้องการนำสไตล์ที่เกี่ยวข้องกับ class เรียกว่า backgroundOrange ไปใช้กับ <div> tag อย่างไรก็ตาม คุณยังต้องการนำสไตล์เฉพาะตัวไปใช้กับ <div> ด้วย คุณสามารถทำได้ด้วยโค้ดนี้:
<div class="backgroundOrange" id="customDiv"></div>
<div> tag นี้จะอยู่ภายใต้สไตล์สำหรับ class backgroundOrange นอกจากนี้ มันจะใช้สไตล์ที่นำไปใช้กับ customDiv ID โดยใช้ ID selector
สรุป
เมื่อคุณทำงานกับ CSS ไม่มีเหตุผลเฉพาะที่บังคับให้คุณใช้ ID แทน class อย่างไรก็ตาม เป็น best practice ที่จะใช้ IDs เฉพาะเมื่อคุณต้องการสไตล์นำไปใช้กับ element เดียวบนหน้าเว็บ และใช้ classes หากคุณต้องการสไตล์นำไปใช้กับหลาย elements
ในบทช่วยสอนนี้ เราอภิปราย พร้อมอ้างอิงตัวอย่าง พื้นฐานของ CSS ID และ class selectors และเราเปรียบเทียบและ đối比สองตัว ตอนนี้คุณพร้อมที่จะเริ่มใช้ CSS ID และ class selectors อย่างนักพัฒนาซอฟต์แวร์มืออาชีพ!
