مُحدِّدات 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> في هيكل الصفحة ليجعل أي نص تحتويه باللون الأحمر. مبدأ أساسي واضح.

لمحة عامة عن المحدد

حسناً، كان ذلك مثالاً سهلاً. سوف أقوم بشرح جميع المحددات لاحقاً، وستتخذ الأمور منحى أكثر تعقيداً. ولكن قبل ذلك إليك لمحة عامة عن تركيب الأنماط المختلفة لجميع محددات CSS 2.1 (مبنية على الجدول في CSS2.1، 5.1 تطابق النمط).

لمحة عن نمط CSS 2.1
نوع المحدد النمط الشرح
Universal – عالمي * ينطبق على أي عنصر.
Type – نوعي E ينطبق على أي عنصر E.
Class – فئة .info ينطبق على أي عنصر تحتوي خاصية فئته (class) القيمة info.
ID – معرف #footer ينطبق على أي عنصر تساوي خاصية معرفه (id) القيمة footer.
Descendant – حفيد E F ينطبق على أي عنصر F ينحدر من أب أو جد E.
Child – طفل E > F ينطبق على أي عنصر F ينحدر مباشرةً من الأب E.
Adjacent – قريب E + F ينطبق على أي عنصر F مسبوق مباشرةً بعنصر E.
Attribute – خاصية E[att] ينطبق على أي عنصر E يملك الخاصية att بغض النظر عن قيمة محتواها.
Attribute – خاصية E[att=val] ينطبق على أي عنصر E تساوي خاصيته att القيمة val.
Attribute – خاصية E[att~=val] ينطبق على أي عنصر E خاصيته att تحتوي على قيم مفصولة بمسافة أحدها يساوي القيمة val.
Attribute – خاصية E[att|=val] ينطبق على أي عنصر E خاصيته att تحتوي على قيم مفصولة بشرطة (-) وتبدأ بالقيمة val.
الفئة الافتراضية :first-child E:first-child ينطبق على أي عنصر E عندما يكون E هو الطفل الأول لأبيه.
الفئات الافتراضية للرابط E:link
E:visited
ينطبق على الروابط التي لم يتم زيارتها (:link) أو التي تمت زيارتها (:visited).
الفئات الافتراضية للمتغيرات E:active
E:hover
E:focus
ينطبق على العنصر E خلال عمليات معينة من قبل المستخدم.
الفئة الافتراضية :language E:lang(c) ينطبق على العنصر E ذا اللغة c.
العنصر الافتراضي :first-line E:first-line ينطبق على محتوى السطر الأول للعنصر E.
العنصر الافتراضي :first-letter E:first-letter ينطبق على الحرف الأول للعنصر E.
العنصران الافتراضيان :before و :after E:before
E:after
تستخدم لإضافة المحتويات قبل وبعد العنصر.

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

سليل
العنصر الذي يكون طفلاً وإن نزل -كالأحفاد- في هيكل الصفحة.
سلف
العنصر الذي يكون أباً وإن علا -كالأجداد- في هيكل الصفحة.
طفل
السليل المباشر للعنصر، بحيث لا يوجد أي عنصر آخر بينهما.
أب
السلف المباشر للعنصر، بحيث لا يوجد أي عنصر آخر بينهما.
قريب
العنصر الذي لديه نفس الأب للعنصر الحالي.

المحددات البسيطة والمركبة

هناك قسمان رئيسان للمحددات: بسيطة ومركبة.

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

p.info { background:#ff0; }

المحدد المركب (يسمى أحياناً contextual) يتكون من محددين بسيطين أو أكثر مفصولة بأداة دمج. مثال بسيط على محدد مركب:

div p { font-weight:bold; }

ستطبق القاعدة السابقة على كل عنصر p سليل لعنصر div.

يجوز إلحاق المحدد بعنصر افتراضي واحد. يُلحق العنصر الافتراضي في المحدد المركب بآخر محدد بسيط فيه فقط.

ستجد المزيد من التفاصيل حول المحددات المركبة وأدوات الدمج والعناصر الافتراضية في الجزئين التاليين -بمشيئة الله- في هذه السلسلة.

المحدد العالمي

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

  • .myclass تساوي * .myclass
  • #myid تساوي * #myid

استخدام واحد للمحدد العالمي والذي غدا مشهوراً هو استخدامه لتصفير قيم الهامش والديباجة (margin & padding).

* { margin:0; padding:0; }

يسمى ذلك أحياناً Global White Space Reset.

المحدد النوعي

ينطبق المحدد النوعي مع كل عنصر من نوع معين. القاعدة التالية تنطبق على كل عناصر المقاطع النصية في الصفحة جاعلة حجم النص 2em:

p { font-size:2em; }

محدد الفئة

تمثل علامة النقطة “.” محدد الفئة الذي يستهدف العناصر بناءاً على قيمة خاصية class لكل عنصر. ستنطبق القاعدة التالية على كل عنصر p قيمة فئته “info”:

p.info { background:#ff0; }

بإمكانك إعطاء عنصر عدة فئات، حيث تحتمل خاصية class قيم الفئات متفرقة بمسافة، في تلك الحالة سينطبق محدد الفئات مع العناصر ذات الفئات المتعددة. ستنطبق القاعدة التالية على عناصر p التي تحمل كلاً من “info” و “error” في قائمة فئاتها:

p.info.error { color:#900; font-weight:bold; }

ملاحظة: محدد الفئات المتعددة لايعمل مع Internet Explorer 6 ولكنه يعمل مع النسخة 7.

ليس من الضروري ذكر نوع العنصر في المحدد، فعدم استخدامه يساوي استخدام المحدد العالمي في محله. ستطبق القاعدة التالية على كل العناصر ذات الفئة “info” بغض النظر عن نوعها:

.info { background:#ff0; }

محدد المعرف

يمثل محدد المعرف العلامة “#”، ويستهدف العناصر بناءاً على قيمة خاصية المعرف id. ستنطبق القاعدة التالية على كل العنصر ذا المعرف “info” -في قيمة خاصية id- بغض النظر عن نوع العنصر نفسه:

#info { background:#ff0; }

إذا قمت بتحديد نوع عنصر معين، ستنطبق القاعدة على ذلك النوع فقط:

p#info { background:#ff0; }

من المهم تذكّر أن محدد المعرف أعلى من محدد الفئة، وأن المعرف لابد أن يكون فريداً في كل صفحة. لذلك ينطبق محدد المعرف على عنصر واحد في صفحةٍ ما.

يُتبع…

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

المصدر

CSS 2.1 selectors, Part 1.

7 thoughts on “مُحدِّدات CSS 2.1

  1. Pingback: 9 مصادر تقدم دروس CSS بالعربية « كتوم

  2. Pingback: دورة CSS - الدرس الأول « [ إحســــان ]

  3. Pingback: » مُحدِّدات CSS 2.1 | الجزء الثاني - توقيع

  4. Pingback: مصادر حول تقنية CSS3

  5. Pingback: نظرة !!!!!! حول تقنية css3

اترك رد