مُحدِّدات CSS 2.1 | الجزء الثاني

هذا هو الجزء الثاني من سلسلة مكونة من ثلاثة أجزاء تشرح المحددات المتوفرة في CSS 2.1. الجزء الأول كان عن الأساسيات مثل المحدد النوعي، ومحدد الفئة والمعرف، والمحدد العالمي، ومحددات بسيطة.

أدوات الدمج

تستخدم أدوات الدمج للفصل بين محددين بسيطيين -أو أكثر- المكونة لمحدد مركب. أدوات الدمج المتوفرة هي المسافة -سواءاً مسافة واحدة أو أكثر- و > و +. وظيفة كل أداة مشروحة في الأقسام التالية.

محددات السُلالة

يتكون محدد السليل من محدديين بسيطين -أو أكثر- مفصولين بمسافة. ينطبق هذا المحدد على سلاسة العناصرالتي ينطبق عليها المحدد البسيط الأول. مثلاً: ستطبق القاعدة في المحدد التالي على جميع عناصر p المنحدرة من عنصر div:

div p { color:#f00; }

يمكن لمحددات السلالة أن تتكون من أي شكل من أشكال المحددات البسيطة. ستطبق القاعدة التالية على جميع عناصر p ذات الفئة info والتي تنحدر من العنصر li المنحدر بدوره من العنصر div ذا المعرف myid:

div#myid li p.info { color:#f00; }

محددات السلالة تسمح لك باستهداف عناصر دون الحاجة لإعطائها فئةً أو معرفاً، مما يساعد على نظافة نصِّك. لنفترض أن لديك قائمة تصفح كما يلي:

 

لتستهدف نقاط القائمة وروابطها فقط، تقوم باستخدام الـ CSS التالي:

#nav li { display:inline; } 
#nav a { font-weight:bold; } 

أكمل القراءة

مُحدِّدات CSS 2.1

من أول الأشياء التي تتعلمها عن CSS المحددات (selectors). من الواضح أن المحددات جزء أساسي من CSS، ولكن القليل من المطورين يستغلون إمكانياتها كاملة، فبينما يمكنك إنجاز الكثير فقط باستخدام نوع العنصر (tag type)، والمعرف (ID)، والفئة (Class) إلا أن هناك الكثير من المحددات الأخرى.

تعلُّم استخدام المحددات بأشكالها يساعدك على ابقاء شفرة XHTML نظيفة. وسيعطيك القدرة على الاستغناء عن الفئات (Classes) الزائدة عن الحاجة، وعناصر div و span الكثيرة. فكرة جيدة، أليس كذلك؟

إذاً لماذا لاتكون المحددات بأكملها مستخدمة بشكل واسع؟ كان السبب الرئيسي هو ضعف الدعم في المتصفح Internet Explorer حتى النسخة السادسة منه. معظم المتصفحات الحديثة تدعم معظم أو كل محددات CSS 2.1. فاحذر قبل أن تسارع باستخدام كل ما هو مذكور في هذه السلسلة.

الخبر الجيد هو أن IE 7 لديه دعم أفضل بكثير للمحددات، وبالتالي يمكنك البدء باستخدامها حاليا، مما يضعك في الوقت المناسب لتعلم المحددات المتوفرة بمختلف أشكالها.

بما أنه يوجد الكثير من محددات CSS فإن مقالة واحدة تشرحهم جميعاً في آنٍ واحد ستكون طويلةً جداً. وحتى تكون المعلومات أسهل في الاستيعاب، قمت بتوزيع مادة الموضوع على ثلاثة أجزاء:

  1. الجزء الأول: هذه المقالة التي تشرح أساسيات المحددات، والمحدد العالمي (Universal Selector)، والمحدد النوعي (Type)، والمعرف (ID)، والفئة (Class).
  2. الجزء الثاني: عن أدوات الدمج (combinators)، والمحددات المركبة (combined selectors)، الجمع (grouping)، ومحددات الخصائص (attribute selectors).
  3. الجزء الثالث: عن الفئات الافتراضية (pseudo-classes) و العناصر الافتراضية (pseudo-elements).

سأقوم بعد الانتهاء من الجزئين التاليين بتحديث النص ليحوي رابطين لكلٍّ منهما.

حسناً، لنبدأ على بركة الله.

أساسيات المحدد

أولاً الأساسيات المبدئية. يتبع محدد CSS نمطاً يتم اختبار مطابقته على جميع العناصر المكونة لهيكل الصفحة. عندما تتوافر جميع شروط التحديد المعرِّفة بالنمط في عنصر -أو عدة عناصر- ينطبق المحدٍّد على العنصر، وبالتالي تطبَّق جميع القوانين المعرفة في المحدد على ذلك العنصر. لنأخذ هذا المثال البسيط:

p { color:#f00; }

المحدد هو الجزء الذي يأتي قبل قوس البداية “{“. المحدد هنا هو p والذي ينطبق على جميع عناصر <p> في هيكل الصفحة ليجعل أي نص تحتويه باللون الأحمر. مبدأ أساسي واضح. أكمل القراءة