CSS – المحدد Selector

تتكون انماط CSS من ثلاث عناصر اساسية وهم : المحدد Selector والسمات Properties و قيم السمات Values. في الدروس القادمة سوف نستفيض في عرض السمات المختلفة التي يمكن استخدامها مع عناصر HTML المختلفة. في هذا الدرس سوف نشرح الطرق المختلفة لتحدد العناصرالتي نريد ان نطبق عليها اطر CSS.

هناك اكثر من طريقة لتحديد العناصر مثل باستخدامات المعرفات ids والاصناف classes والانواع وغيرها. من خلال تلك الطرق نستطيع تحديد عناصر HTML التي نطبق عليها اطر CSS.

محدد الانواع Type Selector

يكون المحدد هنا هو احد عناصر HTML، ويتم تطبيق نمط CSS على كل عناصر HTML من ذلك النوع مثل: a, h1, h2, p, li وغيرها. مثال

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>paragraph paragraph paragraph paragraph paragraph.</p>
<p>paragraph paragraph paragraph paragraph paragraph.</p>

h1{
	color:red;
}

p{
	color:blue;
	font-weight: bold;
}

محدد المعرف ID Selector

يتم تطبيق نمط CSS على عنصر HTML الذي يحمل ذلك المعرف. لكي نشير الى محدد من نوع ID في ملف css نضع الرمز # ثم يتبعه اسم المعرف. مثال:

<p id="elementId1">paragraph paragraph paragraph paragraph paragraph.</p>
<p id="elementId2">paragraph paragraph paragraph paragraph paragraph.</p>

#elementId1{
	color:red;
}

#elementId2{
	color:blue;
}

محدد الصنف class Selector

يتم تطبيق نمط CSS على عناصر HTML التي تحمل من نوع ذلك الصنف . لكي نشير الى محدد من نوع الصنف في ملف css نضع الرمز . ثم يتبعه اسم الصنف. مثال:

<p class="redText blueBackGround">paragraph paragraph paragraph paragraph paragraph.</p>
<p class="greenText">paragraph paragraph paragraph paragraph paragraph.</p>

.redText{
	color:red;
}

.greenText{
	color:green;
}

.blueBackGround{
	background-color: blue;
}

الفرق بين محدد الصنف والمعرف

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

المحدد العام Universal Selector

هو محدد يستخدم لتطبيق سماته على عناصر HTML. مثال:

<h1>Heading 1</h1>

<p>paragraph paragraph paragraph paragraph paragraph.</p>
<p>paragraph paragraph paragraph paragraph paragraph.</p>

*{
	color:blue;
	text-align: center;
}

محددات التجميع Grouping Selector

هي طريقة تساعدنا على ان نطبق سمات CSS على مجموعة من المحددات. ونستخدم فيها المحددات السابقة وذلك بوضع فاصلة , بين المحددات. مثال:

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p id="id1">paragraph paragraph paragraph paragraph paragraph.</p>
<p id="id2">paragraph paragraph paragraph paragraph paragraph.</p>

h1, h2{
	color:red;
}

#id1, #id2{
	color:blue;
	text-align: center;
}

محدد الابن Child Selector

عادة ما تتكون صفحات الويب من مجموعة من عناصر HTML التي تحتوي على عناصر اخرى لنستطيع تنظيم وتكوين صفحات الويب. عندما يكون هناك عنصر HTML داخل عنصر اخر نسمي العنصر الخارجي “الاب Parent” و الداخلي “الابن Child”. محدد الابن يمكننا من تحديد عنصر الابن لتطبيق سمات CSS عليه. مثلا اذا كانت صفحة الويب مقسمة الى جزء جانبي (بداخله مجموعة من العناصر) وجزء رئيسي (بداخله مجموعة من العناصر) ونريد مثلا ان الفقرات <p> داخل الجزء الجانبي (الابن) يكون لون الكتابة مختلف عن الرئيسية.

لتطبيق سمات CSS على عناصر الابن نستخدم الاتي محدد الابن < محدد الاب . مثال:

<p>paragraph paragraph paragraph paragraph paragraph.</p>

<div class="side">
	<h1>Heading 1</h1>
	<p>paragraph paragraph paragraph paragraph paragraph.</p>
</div>

<div class="main">
	<p>paragraph paragraph paragraph paragraph paragraph.</p>
</div>

.side > p {
	color:red;
}

.main > p {
	color:blue;
}

محدد الابن يعمل على عناصر HTML والتي هي الابن المباشر. ماذا اذا كان هناك عنصر بداخله عنصر بداخله عنصر وهكذا … نستخدم محدد السلالة

محدد السلالة Descendant Selector

محددات السلالة تستخدم لتحديد عنصر HTML الذي ينحدر من عنصر آخر سواء كان الابن المباشر او الغير مباشر. لتطبيق سمات CSS على عناصر السلالة نستخدم المحدد رأس السلالة ثم مسافة ” ” ثم محدد من السلالة . مثال:

<div class="main">
	<div class="mainHeader">
		<h1>Heading 1</h1>
	</div>
</div>

.main h1{
	color:red;
}

محدد الخاصية Attribute Selector

محددات الخاصية تستخدم لتحديد عنصر HTML التي تحتوي على خاصية معينة. مثلا نريد ان نجعل الفقرات التي تحتوي على خاصية اللغة lang="ar" تختلف عن الخاصية التي تحوي lang="en". مثال:

<p>paragraph paragraph paragraph paragraph paragraph.</p>
<p lang="ar">paragraph paragraph paragraph paragraph paragraph.</p>
<p lang="en">paragraph paragraph paragraph paragraph paragraph.</p>

p[lang="ar"] {
	color:red;
}

p[lang="en"]{
	color:blue;
}