เมื่อเปรียบเทียบคลาส CSS กับ ID ความแตกต่างก็คือคลาส CSS จะใช้สไตล์กับองค์ประกอบหลายรายการ ในทางกลับกัน ID จะใช้สไตล์กับองค์ประกอบที่ไม่ซ้ำใคร ID มีความพิเศษตรงที่คุณสามารถใช้ URL พิเศษเพื่อเชื่อมโยงไปยังองค์ประกอบโดยตรงและถูกใช้โดย JavaScript
ใน CSS ตัวเลือกจะใช้เพื่อกำหนดเป้าหมายองค์ประกอบเฉพาะหรือช่วงขององค์ประกอบบนหน้าเว็บ เมื่อองค์ประกอบได้รับการกำหนดเป้าหมายแล้ว คุณจะสามารถใช้สไตล์หรือชุดรูปแบบกับองค์ประกอบได้
มีให้เลือกหลากหลาย สองอันที่ใช้กันมากที่สุดคือ
เมื่ออ่านคู่มือนี้จบ คุณจะทราบถึงความแตกต่างระหว่างตัวเลือกทั้งสองนี้ คุณจะมีข้อมูลที่จำเป็นในการตัดสินใจอย่างมีข้อมูลว่าตัวเลือกใดที่จะใช้ในโค้ดของคุณ มาเริ่มกันเลย
เมื่อออกแบบเว็บเพจ คุณจะต้องการสไตล์บางอย่างเพื่อนำไปใช้กับองค์ประกอบเฉพาะบนเพจ ตัวอย่างเช่น คุณอาจต้องการตั้งค่าสีข้อความของแท็ก
ทั้งหมดให้เป็นสีเขียว หรือเปลี่ยนขนาดตัวอักษรของส่วนหัว
ตัวเลือกช่วยให้คุณสามารถกำหนดเป้าหมายองค์ประกอบเฉพาะบนหน้าเว็บที่คุณสามารถใช้สไตล์ได้ ใน CSS มีตัวเลือกมากมายให้เลือก เช่น ตัวเลือกสากล ตัวเลือกสืบทอด ตัวเลือกลูก และตัวเลือกการจัดกลุ่ม หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือก CSS โปรดอ่านคู่มือตัวเลือก CSS สำหรับผู้เริ่มต้นของเรา
ตัวเลือกสองตัว
ตัวเลือกรหัสช่วยให้คุณสามารถกำหนดกฎสไตล์ที่ใช้กับ ซิงเกิล องค์ประกอบบนหน้าเว็บ แต่ละหน้าเว็บสามารถมีได้เพียงหนึ่งองค์ประกอบที่มีแอตทริบิวต์ ID เดียวเท่านั้น ซึ่งหมายความว่าตัวเลือก ID ไม่สามารถใช้เพื่อจัดรูปแบบมากกว่าหนึ่งองค์ประกอบได้
ตัวเลือก ID ถูกกำหนดโดยใช้เครื่องหมายแฮช โดยจะตามด้วยค่า ID ที่คุณต้องการใช้ชุดกฎสไตล์ทันที นี่คือตัวอย่างของตัวเลือก ID ที่ใช้งานจริง:
สไตล์นี้ใช้กับองค์ประกอบ
ในเอกสาร HTML ของเราที่มี ID betaBanner . สไตล์จะตั้งค่าสีพื้นหลังขององค์ประกอบเป็นสีส้มและสีของข้อความในองค์ประกอบเป็นสีขาว
ตัวเลือกคลาสช่วยให้คุณสามารถกำหนดกฎสไตล์ที่ใช้กับ องค์ประกอบใดๆ ด้วยแอตทริบิวต์คลาสเท่ากับค่าที่แน่นอน
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ ตัวเลือก ID สามารถใช้เพื่อจัดรูปแบบองค์ประกอบเดียวเท่านั้น เนื่องจากรหัสสามารถใช้ได้เพียงครั้งเดียวบนหน้าเว็บ ในทางกลับกัน คลาสสามารถนำไปใช้กับหลายองค์ประกอบได้ ดังนั้น หากคุณใช้สไตล์โดยใช้ตัวเลือกคลาส องค์ประกอบใดๆ ที่ใช้คลาสนั้นร่วมกันจะอยู่ภายใต้สไตล์ที่คุณกำหนด
ตัวเลือกคลาสถูกกำหนดโดยใช้จุด ตามด้วยค่าของคลาสที่คุณต้องการใช้ชุดของสไตล์ นี่คือตัวอย่างของตัวเลือกคลาสที่ใช้งานจริง:
สไตล์นี้กำหนดสีพื้นหลังของแท็ก
ของเราให้เป็นสีส้ม นอกจากนี้ สไตล์ยังกำหนดสีพื้นหลังของแท็ก
นอกจากนี้ องค์ประกอบเว็บยังสามารถแชร์คลาสที่แตกต่างกันหลายคลาสได้ ดังนั้นหากเราต้องการใช้คลาสที่เรียกว่า large ไปที่แท็ก
ในโค้ดนี้ กฎสไตล์ใดๆ ที่กำหนดไว้สำหรับ
จนถึงตอนนี้ เราได้พูดคุยถึงข้อเท็จจริงที่ว่า ID สามารถใช้สไตล์กับองค์ประกอบเดียวเท่านั้น ต่างจากคลาสที่สามารถนำสไตล์ไปใช้กับหลายองค์ประกอบได้ นี่ไม่ใช่ข้อแตกต่างเพียงอย่างเดียวระหว่างตัวเลือกคลาสและ ID
ในเบราว์เซอร์ คลาสไม่มีฟังก์ชันพิเศษ วัตถุประสงค์หลักคือเพื่อให้คุณสามารถใช้สไตล์กับองค์ประกอบต่างๆ บนหน้าเว็บได้ ในทางกลับกัน เบราว์เซอร์สามารถใช้ ID เพื่อนำทางไปยังบางส่วนของหน้าเว็บได้
หากคุณกำหนด ID ให้กับองค์ประกอบ คุณสามารถใช้ URL พิเศษเพื่อเชื่อมโยงไปยังองค์ประกอบนั้นโดยตรง ลักษณะการทำงานนี้ใช้งานได้เนื่องจากรหัสไม่ซ้ำกันบนหน้าเว็บ
สมมติว่าเราต้องการส่งลิงก์ไปยังเว็บไซต์ของเราซึ่งจะเลื่อนผู้ใช้ไปที่ส่วนหัวโดยอัตโนมัติ เราสามารถทำได้โดยใช้โค้ดนี้:
ในโค้ดนี้ เราได้กำหนด ID ให้กับแท็ก
https://domain.com/index.html#section3
เมื่อผู้ใช้นำทางไปยัง URL นี้ (โดยที่ domain.com คือ URL ของเว็บไซต์ของคุณ) พวกเขาจะเลื่อนไปที่ส่วนหัวด้วย ID section3 . ลักษณะการทำงานนี้ใช้ไม่ได้กับชั้นเรียน
หากคุณมีประสบการณ์ในการใช้ JavaScript คุณจะรู้ว่า ID มักใช้ในภาษาการเขียนโปรแกรมนั้น ฟังก์ชัน getElementById ช่วยให้คุณสามารถเลือกองค์ประกอบบนหน้าเว็บได้ ขึ้นอยู่กับข้อเท็จจริงที่ว่ามีเพียงองค์ประกอบเดียวเท่านั้นที่สามารถแชร์ ID เดียวกันได้
ในทางกลับกัน คลาสสามารถสะท้อนองค์ประกอบหลายอย่างบนหน้าเว็บได้ มันจะไม่มีประโยชน์ถ้าคุณต้องการทำงานกับองค์ประกอบเฉพาะใน JavaScript
ไม่มีกฎเกณฑ์ใน HTML ที่ป้องกันไม่ให้คุณกำหนดองค์ประกอบทั้ง ID และคลาส
"อาชีพกรรมเข้ามาในชีวิตของฉันเมื่อฉันต้องการมันมากที่สุดและช่วยให้ฉันเข้ากับหลักสูตรฝึกหัดได้อย่างรวดเร็ว สองเดือนหลังจากสำเร็จการศึกษา ฉันพบงานในฝันที่สอดคล้องกับค่านิยมและเป้าหมายในชีวิตของฉัน!"
Venus วิศวกรซอฟต์แวร์ที่ Rockbot
ค้นหาการแข่งขัน Bootcamp ของคุณ
สมมติว่าคุณต้องการใช้สไตล์ที่เกี่ยวข้องกับคลาสที่เรียกว่า
แท็ก
เมื่อคุณทำงานกับ CSS ไม่มีเหตุผลใดที่บังคับให้คุณใช้ ID ในชั้นเรียน อย่างไรก็ตาม แนวทางปฏิบัติที่ดีที่สุดคือใช้เฉพาะ ID หากคุณต้องการให้สไตล์นำไปใช้กับองค์ประกอบเดียวบนหน้าเว็บ และใช้คลาสหากคุณต้องการให้สไตล์นำไปใช้กับองค์ประกอบหลายรายการ
ในบทช่วยสอนนี้ เราได้พูดคุยถึงพื้นฐานของ CSS ID และตัวเลือกคลาส โดยอ้างอิงถึงตัวอย่าง และเราได้เปรียบเทียบและเปรียบเทียบทั้งสองอย่าง ตอนนี้คุณพร้อมที่จะเริ่มใช้ CSS ID และตัวเลือกคลาสเหมือนนักพัฒนาผู้เชี่ยวชาญแล้ว!04 และ 16 . ทั้งสองใช้เพื่อกำหนดเป้าหมายองค์ประกอบที่ควรใช้สไตล์ คลาส CSS และตัวเลือก ID
23 ต่างกันอย่างไร และ 33 ตัวเลือก? นี่เป็นคำถามที่ถามโดยนักพัฒนาหลายคนที่เพิ่งเริ่มใช้ CSS และเป็นคำถามที่เราจะตอบในคู่มือนี้ ตัวเลือก CSS
40 และ 58 ใช้เพื่อใช้สไตล์กับองค์ประกอบตามคลาสและ ID ที่กำหนดให้กับองค์ประกอบ HTML ตามลำดับ แต่ตัวเลือกเหล่านี้มักจะสับสน ดังนั้นเรามาสำรวจว่าตัวเลือกแต่ละตัวทำงานอย่างไรตัวเลือก ID นั้นไม่ซ้ำกัน
<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
color: white;
background-color: orange;
} ตัวเลือกคลาสไม่ซ้ำกัน
<html>
<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
background-color: orange;
} <html>
<div class="orangeBackground large">This is a banner.</div>
63 และ 77 คลาสถูกนำไปใช้กับองค์ประกอบเว็บของเรา ในทางกลับกัน ด้วย ID เราไม่สามารถจำลองพฤติกรรมนี้ได้ เนื่องจากแต่ละองค์ประกอบสามารถมีได้เพียง ID เดียวเท่านั้นID มีฟังก์ชันเบราว์เซอร์ที่ไม่ซ้ำใคร
<h3 id="section3">Section Three</h3>
ที่มีข้อความ
80 . ตอนนี้เราสามารถส่งลิงก์โดยตรงไปยังผู้ใช้เพื่อเลื่อนไปยังองค์ประกอบนั้นบนหน้าเว็บได้ ซึ่งทำได้โดยใช้ URL ต่อไปนี้: รหัสถูกใช้โดย JavaScript
คุณสามารถใช้ทั้ง ID และตัวเลือกคลาส CSS
92 ไปที่แท็ก <div class="backgroundOrange" id="customDiv"></div>
109 . นอกจากนี้ ยังจะใช้สไตล์ที่ใช้กับ 112 ID โดยใช้ตัวเลือก ID บทสรุป
