مُحدِّدات 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; } 


هاتان القاعدتان لن تطابقا أي نقاط قائمة وروابطها أخرى قد تكون موجودة في الصفحة. قارن ذلك باعطاء كل نقطة ورابط في القائمة فئةً لتحديده وستعرف كيف أن استخدام محدادت السلالة تساعد على ابقاء نصوصك نظيفة.

محدد الطفل

ويستهدف السليل المباشر لعنصرٍ ما. يتكون محدد الطفل من محددين أو أكثر يفصل بينهما بعلامة أكبر من “>”، بحيث يكون العنصر الأب على يسارها، ويسمح بوجود مسافة حول أداة الدمج.

ستطبق القاعدة التالية على جميع عناصر strong التي تنحدر مباشرةً من العنصر div:

div > strong { color:#f00; }

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

النص الأول

النص الثاني

محددات الأقارب المتجاورة

يتكون هذا المحدد من محددين بسيطين تفصلهما علامة الجمع +. ويسمح بمسافة حول أداة الدمج. تطابق هذه المحددات العنصر الذي يأتي مباشرةً بعد العنصر المذكور في المحدد الأول بحيث يكون لكلا العنصرين نفس الأب.

p + p { color:#f00; }

عند تطبيق القاعدة السابقة على المثال التالي فإن القاعدة ستؤثر على النص الثاني فقط:

النص الأول

النص الثاني

الجمع

قررت ذكر الجمع هنا بسبب خطأ شائع بين متعلمي CSS يتعلق بجمع المحددات المدمجة.

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

الأخبار

  • السطر 1
  • السطر 2

لنقل أننا نريد إضافة المسافة نفسها لعناوين الدرجة الثالثة h3 وللقوائم الغير مرتبة ul فقط إذا كانوا داخل div معرف بـ”news”. إليك الطريقة الخاطئة:

div#news h3, ul {
margin:0 2em;
}

سوف ينطبق ذلك على العنوان من الدرجة الثالثة والقائمة الغير مرتبة داخل div#news. ولكن المشكلة تكمن في أنه سينطبق على جميع القوائم الغير مرتبة في هيكل الصفحة كذلك، وليس فقط الموجودة داخل div#news.

هذه هي الطريقة الصحيحة لجمع المحددات في هذه الحالة:

div#news h3,
div#news ul {
margin:0 2em;
}

لذا تذكر أن تكتب المحدد بالكامل عند الجمع.

محدد الخاصية

ينطبق هذا المحدد بناءاً على وجود خاصية أو قيمتها. هناك أربع طرق لتطبيق محدد خاصية:

[att]
ينطبق على العناصر ذات الخاصية att، بغض النظر عن قيمتها.
[att=val]
ينطبق على أي عنصر تساوي خاصيته att القيمة “val”.
[att~=val]
ينطبق على أي عنصر تحتوي قيمتة خاصيته att على قيم مفصولة بمسافة أحدها يساوي القيمة “val”.
[att|=val]
ينطبق على أي عنصر تحتوي قيمتة خاصيته att على قيم مفصولة بشرطة (-) وتبدأ بالقيمة “val”. الاستخدام الرئيس لهذا المحدد هو لتحديد اللغة المعرفة بالخاصية lang أو xml:lang في XHTML، مثلاً: “en”, “en-us”, “en-gb”، إلى أخره

لنذكر بعض الأمثلة. ستنطبق القاعدة التالية على جميع النصوص p ذات خاصية title بغض النظر عن القيمة التي تحتويها هذه الخاصية:

p[title] { color:#f00; }

في المثال التالي ستنطبق القاعدة على جميع العناصر div ذات الفئة error:

div[class=error] { color:#f00; }

لتحديد جميع الخلايا td ذات قيمة محتوية على col1 لخاصيتها headers:

td[headers~=col1] { color:#f00; }

وأخيراً ينطبق المحدد التالي على جميع النصوص p التي تبدأ خاصيتها lang بالقيمة en.

p[lang|=en] { color:#f00; }

من الممكن التحديد باستخدام أكثر من خاصية لنفس العنصر في محددٍ واحد. سينطبق المحدد التالي على جميع عناصر blockquote ذات الفئة quote والتي تحوي خاصية cite بغض النظر عن قيمتها:

blockquote[class=quote][cite] { color:#f00; }

يتبع

وبذلك نكون قد انتهينا من الجزء الثاني. في الجزء الثالث والأخير من هذه السلسلة سوف أشرح محددات كلاً من الفئات الافتراضية والعناصر الافتراضية. حتى ذلك الوقت قد ترغب بإعادة زيارة الجزء الأول، فالتكرار يعلم الصغار والكبار :)

والسـلام

المصدر

CSS 2.1 selectors, Part 2 من 456bereastreet.com.

اترك رد