من بداية دروس CSS يتبادر لذهن المتدرب تساؤلات وتحتاج لتوضيح، ومنها كيف نعرف أن الجزئية الفلانية في صفحة الويب على سبيل المثال هي التي نريد عمل عليها ستايل معين ومخصص!، هنا يأتي دور المحددات.

ماهي المحددات

المحددات أو Selectors تستخدم لتحديد عناصر HTML التي نريد تصميمها أو تطبيق ستايل CSS عليها. فمثلا لدينا 3 صور في صفحة ويب معينة ونريد تخصيص تصميم معين لكل صورة. نلجأ للمحددات لكي نفرض ستايل لكل صورة حسب رغبتنا.

أنواع المحددات CSS Selectors

هناك 3 محددات الأكثر استخداماً والشائعة في تصميم صفحات الويب وهي كالتالي:

1. محدد العناصر CSS Element Selector

2. المحدد id (CSS id Selector)

3. المحدد class (CSS class Selector)

محدد العناصر CSS

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

ويستخدم هذا النوع مع العناصر المعروفة والثابتة داخل HTML مثل الفقرات <P> او العناوين والصور غيرها، بمعنى تستخدم هذا المحدد عندما تريد فرض خواص معينة على عنصر في جميع صفحة الويب وأينما وجد.

مثال (3):

الكود في الـ CSS يكون كالتالي:

p {
color: red;
 font-size:14px” 
}

الكود داخل صفحة الويب:

<p> Here your paragraph .. write your text </p>

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

وللتوضيح أكثر معروف أن <p> هي ترمز لعناصر الفقرات فقط علينا تحديدها كما في المثال أعلاه بـ p ثم فتح قوس CSS ووضع الخواص التي نريدها داخل صفحة الويب نكتفي بعمل الفقرة كما هو موضح أعلاه.

1- المحدد id (CSS id Selector)

يستخدم محدد id لتحديد عنصر محدد وفريد واحد فقط داخل صفحة HTML (لا يتكرر).

من خلال محدد id نستطيع تطبيق خواص CSS على عنصر بعينة، فعلا سبيل المثال لدينا فقرة نصية معينة داخل صفحة ويب ونريد تطبيق تصميم معين عليها دون غيرها، هنا نستخدم خاصية المحدد id. ويتم تعريف المحدد id دائما داخل كود CSS بعلامة # ثم تسمية المحدد حسب الرغبة (علامة # تعني أن المحدد هو من نوع id).

مثال (4):

في كود الـ CSS

#mytext {
font-size: 20px;
color: #000000;
}

داخل صفحة الويب:

<p id=”mytext” > Here your paragraph .. write your text as you want </p>

في المثال أعلاه استخدمنا طريقة المحدد id لتطبيق خواص معينة على عنصر النص p، داخل كود الـ CSS قمنا بعمل id وهو #mytext وفتحنا الأقواس وأضفنا الخواص التي نريدها وهي (حجم النص + اللون).

داخل صفحة الويب قمنا بعمل نص ثم استدعينا الـ id وحددناه كما تلاحظ أعلاه داخل بداية كود الفقرة id=”mytext” كتبنا id ثم علامة = وبين علامتي تنصيص اسم الـid الذي حددناه أو أسميناه. وسيتم تطبيق الخواص على الفقرة.

2- المحدد class (CSS class Selector)

نستخدم طريقة الـ class لتعيين الخواص على عناصر معينة، ويمكن ان يتكرر.

طريقة كتابة الـ class تتم داخل كود CSS نبدأ بكتابة نقطة (.) متبوعاً باسم الكلاس حسب رغبتنا وتنظيمنا للعمل.

مثال (5)

في كود الـ CSS

.mytitle {
font-size: 33px
line-height: 44px;
color: #CCC;
}

داخل صفحة الويب:

<h3 class=”mytitle”> Hello, This is my BIG TITLE </h3>

في المثال أعلاه نرغب بعمل عناوين معينة ونريد أن نطبق عليها خواص معينة، نقوم بعمل class داخل كود CSS ونضيف الخواص التي نرغب بها، بدأنا بعمل نقطة (.)  ثم اسم الـ class وهو mytitle ثم قوسين وبينهما الخواص التي نريد إضافتها وتطبيقها على العناوين.

داخل صفحة الويب عندما نقوم بعمل العنوان ونريد تطبيق الخواص عليها نستدعي الـ class كما تلاحظ أعلاه في بداية كود العنوان تم الاستدعاء بكتابة class ثم علامة (=) وبعده بين علامتي التنصيص اسم الـclass وهو mytitle