:not() :is() และ :where()
ตัดองค์ประกอบออกด้วย :not() เลือกให้ตรงกับรายการใดก็ได้ด้วย :is() และใช้ :where() เพื่อให้ความจำเพาะต่ำ
:not() :is() และ :where() เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
:not() คลาสเทียม
:not(selector) เลือกองค์ประกอบที่ไม่ตรงกับตัวเลือกที่กำหนด เป็นการกลับผลการเลือก
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() กับอาร์กิวเมนต์หลายรายการ
CSS สมัยใหม่อนุญาตให้อาร์กิวเมนต์หลายรายการอยู่ภายใน :not() — จะเลือกองค์ประกอบที่ไม่ตรงกับตัวเลือกใด ๆ ในรายการ:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
ความจำเพาะเจาะจงของ :not()
ความจำเพาะเจาะจงของ :not() จะเท่ากับความจำเพาะเจาะจงของอาร์กิวเมนต์ที่มีความจำเพาะสูงที่สุด :not(.active) มีความจำเพาะระดับคลาส (0,1,0)
:is() คลาสเทียม
:is() ตรงกับองค์ประกอบใด ๆ ที่ตรงกับตัวเลือกใดตัวเลือกหนึ่งในรายการ ช่วยให้การจัดกลุ่มง่ายขึ้นและลดการเขียนซ้ำ
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
ความจำเพาะเจาะจงของ :is()
:is() ใช้ความจำเพาะเจาะจงของอาร์กิวเมนต์ที่มีความจำเพาะสูงที่สุด หากรายการมีตัวเลือก ID อยู่ กฎทั้งหมดจะมีความจำเพาะระดับ ID
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
การแยกวิเคราะห์แบบผ่อนปรนของ :is()
:is() ใช้การแยกวิเคราะห์ตัวเลือกแบบผ่อนปรน หากตัวเลือกใดในรายการไม่ถูกต้อง ระบบจะละเว้นตัวเลือกนั้นอย่างเงียบ ๆ และยังคงใช้ตัวเลือกที่เหลือ ส่วนตัวเลือกที่คั่นด้วยจุลภาคทั่วไปจะล้มเหลวทั้งหมดหากมีตัวเลือกใดตัวเลือกหนึ่งไม่ถูกต้อง
:where() คลาสเทียม
:where() ทำงานเหมือน :is() ทุกประการ แต่มีความจำเพาะเจาะจงเป็นศูนย์ ออกแบบมาสำหรับคลาสช่วยงานและรูปแบบรีเซ็ตที่ควรถูกเขียนทับได้ง่าย
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() สำหรับรูปแบบรีเซ็ต
:where() เหมาะอย่างยิ่งสำหรับรูปแบบรีเซ็ตของ CSS และรูปแบบพื้นฐานที่ไม่ควรชนะการแข่งขันด้านความจำเพาะเจาะจง:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
การเปรียบเทียบความจำเพาะเจาะจง
สรุปพฤติกรรมด้านความจำเพาะเจาะจง:
:is()— ความจำเพาะสูงสุดจากอาร์กิวเมนต์ทั้งหมด:where()— ความจำเพาะเป็นศูนย์เสมอ:not()— ความจำเพาะสูงสุดจากอาร์กิวเมนต์ทั้งหมด
การต่อ :is() และ :not()
ใช้ทั้งสองอย่างร่วมกันเพื่อสร้างตัวเลือกที่แม่นยำและอ่านง่าย:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
การรองรับของเบราว์เซอร์
:is() และ :where() รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด :not() ที่มีอาร์กิวเมนต์หลายรายการรองรับในเบราว์เซอร์สมัยใหม่ หลีกเลี่ยงการใช้ในโครงการที่ต้องรองรับ IE11
ตรวจสอบอย่างรวดเร็ว
คลาสเทียมใดมีความจำเพาะเจาะจงเป็นศูนย์โดยไม่ขึ้นกับอาร์กิวเมนต์?
สรุป
:not() กลับผลการเลือกและรับอาร์กิวเมนต์ได้หลายรายการ :is() ตรงกับตัวเลือกใด ๆ ในรายการ และใช้ความจำเพาะสูงสุดในรายการนั้น :where() ทำแบบเดียวกันแต่มีความจำเพาะเป็นศูนย์ จึงเหมาะอย่างยิ่งสำหรับรูปแบบรีเซ็ต ทั้งสามแบบใช้การแยกวิเคราะห์แบบผ่อนปรน โดยละเว้นตัวเลือกที่ไม่ถูกต้องอย่างเงียบ ๆ
คำถามที่พบบ่อย
บทเรียน “:not() :is() และ :where()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “:not() :is() และ :where()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “:not() :is() และ :where()”
ตัดองค์ประกอบออกด้วย :not() เลือกให้ตรงกับรายการใดก็ได้ด้วย :is() และใช้ :where() เพื่อให้ความจำเพาะต่ำ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “:not() :is() และ :where()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- :hover :focus :active และ :visited
- :nth-child และ :nth-of-type
- :not() :is() และ :where()
- :checked :disabled และคลาสเสมือนของสถานะแบบฟอร์ม