:not() و:is() و:where()
استبعد العناصر باستخدام :not()، وطابق أي عنصر من قائمة باستخدام :is()، واستخدم :where() لمنح خصوصية منخفضة
:not() و:is() و:where() درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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، فستكون للقاعدة بأكملها درجة تحديد المعرّف.
<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()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «:not() و:is() و:where()»؟
استبعد العناصر باستخدام :not()، وطابق أي عنصر من قائمة باستخدام :is()، واستخدم :where() لمنح خصوصية منخفضة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «:not() و:is() و:where()»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- :hover و:focus و:active و:visited
- :nth-child و:nth-of-type
- :not() و:is() و:where()
- :checked و:disabled وأصناف حالات النماذج الزائفة