ตัวเลือกคลาส Pseudo-class ใหม่ของ CSS :is() และ :where()

การเพิ่มเล็กๆ น้อยๆ เหล่านี้ในไวยากรณ์ตัวเลือก CSS จะมีผลอย่างมาก

Adam Argyle

เมื่อเขียน CSS บางครั้งคุณอาจได้รายการเครื่องมือเลือกที่ยาวมากเพื่อกำหนดเป้าหมายองค์ประกอบหลายรายการที่มีกฎสไตล์เดียวกัน ตัวอย่างเช่น หากต้องการปรับสีแท็ก <b> ที่พบภายในองค์ประกอบส่วนหัว คุณอาจเขียนดังนี้

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {   color: hotpink; } 

แต่คุณอาจใช้ :is() แทนเพื่อปรับปรุงความชัดเจนในการอ่านและหลีกเลี่ยงตัวเลือกที่ยาวเกินไป

:is(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; } 

ความอ่านง่ายและความสะดวกของเครื่องมือเลือกที่สั้นลงเป็นเพียงส่วนหนึ่งของคุณค่าที่ :is() และ :where() นำมาสู่ CSS ในโพสต์นี้ คุณจะได้ดูไวยากรณ์และค่าของตัวเลือกเสมือนที่ทำงานได้ 2 รายการนี้

ความเข้ากันได้กับเบราว์เซอร์

:is()

:where()

พบกับ :is() และ :where()

เหล่านี้คือตัวเลือกคลาสจำลองที่ใช้งานได้ โปรดสังเกต () ที่ส่วนท้ายและวิธีที่เริ่มต้นด้วย : ให้คิดว่าการเรียกฟังก์ชันแบบไดนามิกเหล่านี้เป็นรันไทม์ที่จับคู่องค์ประกอบ เมื่อเขียน CSS คุณจะจัดกลุ่มองค์ประกอบเข้าด้วยกันได้ตรงกลาง ช่วงต้น หรือช่วงท้ายของเครื่องมือเลือก นอกจากนี้ ยังเปลี่ยนความเฉพาะเจาะจงได้ด้วย ซึ่งจะช่วยให้คุณลบล้างหรือเพิ่มความเฉพาะเจาะจงได้

การจัดกลุ่มตัวเลือก

:where() จะทำสิ่งใดก็ได้ที่ :is() ทำได้เกี่ยวกับการจัดกลุ่ม ซึ่งรวมถึงการใช้ที่ใดก็ได้ในตัวเลือก การฝัง และการซ้อน ความยืดหยุ่นของ CSS ที่คุณรู้จักและชื่นชอบอย่างเต็มรูปแบบ ลองดูตัวอย่างต่อไปนี้

/* at the beginning */ :where(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; }  /* in the middle */ article :is(header,footer) > p {   color: gray; }  /* at the end */ .dark-theme :where(button,a) {   color: rebeccapurple; }  /* multiple */ :is(.dark-theme, .dim-theme) :where(button,a) {   color: rebeccapurple; }  /* stacked */ :is(h1,h2):where(.hero,.subtitle) {   text-transform: uppercase; }  /* nested */ .hero:is(h1,h2,:is(.header,.boldest)) {   font-weight: 900; } 

ตัวอย่างตัวเลือกแต่ละรายการข้างต้นแสดงให้เห็นถึงความยืดหยุ่นของคลาสจำลองที่ใช้งานได้จริง 2 รายการนี้ หากต้องการค้นหาส่วนต่างๆ ของโค้ดที่อาจได้รับประโยชน์จาก :is() หรือ :where() ให้มองหาตัวเลือกที่มีคอมมาหลายตัวและการใช้ตัวเลือกซ้ำ

การใช้ตัวเลือกแบบง่ายและแบบซับซ้อนด้วย :is()

หากต้องการทบทวนเกี่ยวกับตัวเลือก โปรดดูโมดูลตัวเลือกใน Learn CSS ตัวอย่างตัวเลือกแบบง่ายและแบบซับซ้อนที่จะช่วยอธิบายความสามารถมีดังนี้

article > :is(p,blockquote) {   color: black; }  :is(.dark-theme.hero > h1) {   font-weight: bold; }  article:is(.dark-theme:not(main .hero)) {   font-size: 2rem; } 

จนถึงตอนนี้ :is() และ :where() ใช้แทนกันได้ทางไวยากรณ์ ตอนนี้เรามาพิจารณาความแตกต่างกัน

ความแตกต่างระหว่าง :is() กับ :where()

:is() และ :where() แตกต่างกันอย่างมากในแง่ความเฉพาะเจาะจง หากต้องการทบทวนความเฉพาะเจาะจง โปรดดูโมดูลความเฉพาะเจาะจงใน Learn CSS

สรุปสั้นๆ

• :where() ไม่มีความเฉพาะเจาะจง
  :where() จะรวมความเฉพาะเจาะจงทั้งหมดในรายการตัวเลือกที่ส่งผ่านเป็นพารามิเตอร์ฟังก์ชัน ฟีเจอร์ตัวเลือกนี้เป็นฟีเจอร์ตัวเลือกแบบแรก
• :is() ใช้ความเฉพาะเจาะจงของตัวเลือกที่เฉพาะเจาะจงที่สุด
  :is(a,div,#id) มีคะแนนความเฉพาะเจาะจงของรหัส 100 คะแนน

การใช้ตัวเลือกที่เฉพาะเจาะจงที่สุดจากรายการเป็นข้อผิดพลาดที่ฉันพบเมื่อตื่นเต้นกับการแบ่งกลุ่มมากเกินไป เราปรับปรุงความอ่านง่ายได้เสมอด้วยการย้ายตัวเลือกที่มีความเฉพาะเจาะจงสูงไปยังตัวเลือกของตัวเอง ซึ่งจะไม่ส่งผลกระทบมากนัก ตัวอย่างที่แสดงให้เห็นถึงสิ่งที่เราหมายถึงมีดังนี้

article > :is(header, #nav) {   background: white; }  /* better as */ article > header, article > #nav {   background: white; } 

สำหรับ :where() เราหวังว่าจะเห็นไลบรารีเสนอเวอร์ชันที่ไม่เจาะจง การแข่งขันที่เฉพาะเจาะจงระหว่างสไตล์ของผู้แต่งกับสไตล์ของคลังอาจสิ้นสุดลง จะไม่มีความเฉพาะเจาะจงที่จะแข่งขันกันเมื่อเขียน CSS CSS พัฒนาฟีเจอร์การจัดกลุ่มแบบนี้มาเป็นเวลานานแล้ว ฟีเจอร์นี้พร้อมใช้งานแล้ว แต่ยังคงเป็นพื้นที่ที่เรายังไม่รู้จักมากนัก สนุกกับการสร้างสไตล์ชีตที่เล็กลงและนำคอมมาออก

รูปภาพโดย Markus Winkler ใน Unsplash