เมื่อใช้ CSS สำหรับจัดสไตล์หน้าเว็บ คุณมักจะต้องการเป้าหมายส่วนเฉพาะของหน้าของคุณ วิธีหนึ่งที่คุณสามารถเลือกองค์ประกอบหนึ่งหรือหลายองค์ประกอบได้คือผ่านแอตทริบิวต์ ID และ/หรือ Class ของพวกเขา
ขณะที่คุณผ่านบทช่วยสอนนี้ ลองดู Codepen แบบโต้ตอบและเล่นร่วมกับฉัน!
แอตทริบิวต์ ID และ CSS Selector
มาสร้างพารากرافง่ายๆ โดยใช้แท็ก <p>:
<p> Color this paragraph! </p>
ID คือตัวระบุเฉพาะตัวที่คุณเพิ่มให้กับองค์ประกอบเดี่ยวใดๆ เพื่อระบุตัวตนอย่างเฉพาะเจาะจง มันปฏิบัติตามข้อตกลง id=”#NAME”
ด้วยความคิดนี้ในใจ และเนื่องจากเราต้องการระบายสีพารากرافของเรา มาตั้งชื่อให้มันด้วยชื่อที่ไม่ซ้ำใคร:
<p id="paragraph-colored"> Color this paragraph! </p>
ตอนนี้เรามีตัวระบุเฉพาะตัว ID แล้ว เราต้องแน่ใจว่าเราไม่ได้เพิ่ม ID เดียวกันให้กับองค์ประกอบอื่น แม้เบราว์เซอร์จะไม่บ่น แต่จะสูญเสียจุดประสงค์และ CSS จะไม่ทำงานตามที่ตั้งใจ
ด้วย ID ที่อยู่ในที่แล้ว เราสามารถเลือกมันได้โดยใช้สัญลักษณ์แฮชแท็ก # กับ CSS มาทำให้แท็ก p ของเรามีสีม่วง:
#paragraph-colored { color: purple; } ง่ายมากใช่ไหม? 😄
81% ของผู้เข้าร่วมระบุว่ารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสงานทางเทคโนโลยีหลังจากเข้าร่วมบูทแคมป์ ได้รับการจับคู่กับบูทแคมป์วันนี้
นักศึกษาจบบูทแคมป์เฉลี่ยใช้เวลาน้อยกว่า 6 เดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มบูทแคมป์จนหางานแรก
แอตทริบิวต์ Class และ CSS Selector ของมัน
เยี่ยม เรามีพารากرافที่มีข้อความสีม่วงแล้ว ตอนนี้สมมติว่าเรามีรูปภาพอะโวคาโดหลายรูปใต้แท็ก p เดียวของเรา:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
เราจะระบุและเลือกอะโวคาโด-นักพัฒนาทั้งหมดนี้ได้อย่างไร (ไม่ว่าจะหมายถึงอะไร)? เรารู้ว่าเราไม่สามารถใช้แท็ก ID ได้ เพราะมันใช้ระบุตัวตนของรายการเดี่ยว นี่คือที่ที่แอตทริบิวต์ class เข้ามาเล่นบทบาท
แอตทริบิวต์ class ปฏิบัติตามข้อตกลง class=”#CLASS_NAME” เนื่องจากสมาชิกหลายคนสามารถเป็นของ class เดียวกันได้ อะโวคาโดนักพัฒนาทั้งหมดของเราจึงสามารถกำหนด class ได้ เช่น:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">
ยอดเยี่ยม! รูปภาพอะโวคาโดของเราถูกกำหนด class "avocado-devs" แล้ว เราสามารถใช้ CSS class selector ที่แสดงด้วยจุด (.) ได้ ต่อไปมาเพิ่มคุณสมบัติ CSS filter ให้กับอะโวคาโดนักพัฒนาของเรา เราจะสมมติว่าพวกเขาทำงานดึกดำบรรพ์ ดังนั้นลองกลับสีของพวกเขา 100 เปอร์เซ็นต์
.avocado-devs { filter: invert(100) } ด้วย Class เราสร้างกลุ่มขึ้นมา แล้วด้วย CSS class selector เราสามารถนำสไตล์ไปใช้กับกลุ่มองค์ประกอบได้ตามที่เราต้องการ
การใช้ Generic Tag Selectors ร่วมกับ Class Selectors
เรามักเห็นว่าเมื่อเลือก class ด้วย CSS จะดีกว่าที่จะใช้ generic tag selectors ร่วมกับ dot selector ทำไม? เพราะเรายิ่ง เฉพาะเจาะจง กับ selectors ของเรา CSS ของเราจะนำไปใช้ได้ดีขึ้นมาก
ด้วย CSS เราใช้ generic tag selectors โดยการอ้างอิงพวกเขาโดยชื่อแท็กโดยตรง ตัวอย่างเช่นนี่คือ tag selectors ที่ถูกต้องทั้งหมด:
/* H1 */ h1{} /* Paragraphs */ p{ } ดังนั้นเราสามารถปรับปรุง image selector ของเราโดยรวม img generic tag เข้าไป:
img.avocado-devs { filter: invert(100) } ฟังก์ชันการทำงานไม่ได้เปลี่ยนแปลง แต่เมื่อโค้ดของคุณเติบโต ความเฉพาะเจาะจงนี้สำคัญ มันยังทำให้โค้ดของคุณอ่านง่ายขึ้น นักพัฒนาคนอื่นจะเห็นว่า class avocado-devs อ้างถึงรูปภาพ
นี่สำคัญเพราะที่นี่เราเพียงแค่นำ filter ไปใช้กับรูปภาพที่มีชื่อ class เฉพาะ ถ้าเราเพิ่มรูปอะโวคาโดอีกโดยไม่มี class ที่เหมาะสม สไตล์จะไม่ถูกนำไปใช้ בתורนักพัฒนาเว็บ พฤติกรรมแบบมีเงื่อนไขนี้มักเป็นสิ่งที่เราต้องการ
