Simple selectors إختيار العناصر عن طريق [ ID - Class Name - Tag Name ].
Combinator selectors طريقة إختيار العناصر لها علاقة ببعض مثل عنصر متفرع من عنصر أخر.
Pseudo-class selectors إختيار عنصر أو مجموعة عناصر بناء علي حالة معينة مثل جميع الحقول input التي تكون في حالة disabled.
Pseudo-elements selectors تحديد جزء من العنصر.
Attribute selectors تحديد العناصر عن طريق الخصائص.

CSS Selector

تحديد عنصر HTML بلغة CSS

selector {property:value;property:value;}

</> CSS Tag Name Selector
تحديد العنصر عن طريق Tag Name

طريقة تحديد عنصر <h1> في ملف HTML عن طريق كتابة إسم tag Name ثم يتبع Selector كُتلة Declaration Block.

h1 {
color:red;
background:yellow;
}

</> Tag Name, ID & Class CSS and HTML
تحديد العناصر عن طريق Tag Name, ID & Class في لغتي CSS و HTML

يمكن عن طريق لغة CSS تحديد عنصر أو مجموعة من العناصر بداخل ملف HTML لكي يتم إضافة Style تنسيقات عليهم، ولكن كيف نحدد عنصر أو مجموعة عناصر؟

نحدد العنصر واحد فقط عن طريق إسم لايتكرر خاص به وهذا يتم فقط عن طريق القيمة التي تُكتب بداخل خاصية ID.
نحدد مجموعة من العناصر عن طريق شيء مشترك بينهم مثل Tag Name جميع العناصر التي تحمل نفس tag name سوف تتأثر.
نحدد مجموعة من العناصر عن طريق شيء مشترك بينهم عن طريق Class Name لأننا بحاجة إلي عدم تحديد كل عناصر <p> جزء منهم فقط يتم ذلك عن طريق Class.

إذاً أمامنا ثلاث إختيارات لكتابة Selector لتحديد عنصر أو أكثر:

Tag Name
ID Name
Class Name

</> ID VS Class في لغة HTML ولغة CSS
الفرق بين ID,Class في لغة CSS ولغة HTML

من الطرق الشائعة في لغة CSS هي إختيار عناصر HTML عن طريق خاصية id وخاصية class تسمي Simple selectors ولكن يجب أن نفهم ما الفرق بينهم لكي يتم إستخدامهم بشكل صحيح.

1	id	class
هل يتكرر؟	لا يتكرر id مع أي عنصر من عناصر HTML	يتكرر مع عنصر أو مجموعة عناصر HTML
لماذا يستخدم؟	لتحديد عنصر HTML واحد فقط	لتحديد عنصرين أو مجموعة عناصر HTML
كيف نختار؟	إذا كانت التنسيقات لا تتكرر مع عنصر أخر في صفحة الويب	إذا كانت التنسيقات تتكرر مع عناصر أخري في صفحة الويب
كيف يكتب؟	علامة hash شباك متبوعة بأسم id مثل #abc	علامة dot نقطة متبوعة بأسم class مثل .xyz
هل يمكن كتابة أكثر من قيمة؟	لا يمكن كتابة أكثر من قيمة لخاصية id مثال <"h1 id="abc>	يمكن كتابة أكثر من قيمة لخاصية class مثال <"p class="xyz light>
عدد مرات الأستخدام	لا يمكن تكرار خاصية id مع نفس العنصر	لا يمكن تكرار خاصية class مع نفس العنصر
كتابة أكثر من قيمة بداخل الخاصية؟	لا يمكن أن يكون للعنصر أكثر من id	يمكن أن يكون للعنصر أكثر من class
إستخدام خاصية id مع خاصية class مع العنصر ؟	نعم	نعم
يمكن أن يكون للعنصر id و class بنفس الأسم	نعم	نعم

يجب علينا أن نسأل سؤال بسيط هل هذة التنسيقات style التي يتم كتابتها بلغة CSS سوف تتكرر مع عنصر أخر أو مجموعة عناصر ؟ إذا كانت الاجابة نعم يجب علينا إستخدام class وليس id لأن class يتكرر و id لا يمكن تكرارة.

id syntax

طريقة تحديد id لعنصر HTML بلغة CSS.

#idName {property:value;property:value;}

class syntax

طريقة تحديد class لعنصر HTML بلغة CSS.

.ClassName {property:value;property:value;}

Accepted

قيمة خاصية id غير متكررة مع عناصر HTML أخري تعد طريقة صحيحة.

<h1 id="heading"> CSS Selectors </h1>
<p id="paragraph"> Lorem Ipsum is simply dummy text of the printing </p>
<p id="dummy"> dummy text of the printing </p>

not accepted

قيمة خاصية id متكررة مع عناصر HTML أخري تعد طريقة غير صحيحة.

<h1 id="dummy"> CSS Selectors </h1>
<p id="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
<p id="dummy"> dummy text of the printing </p>

Accepted

يتكرر إسم الكلاس مع أكثر من عنصر ويمكن أن يكون بنفس إسم id لعنصر أخر تعد طريقة صحيحة.

<h1 id="heading"> CSS Selectors </h1>
<p id="paragraph" class="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
<p id="dummy" class="dummy"> dummy text of the printing </p>

not accepted

لا يمكن أن يكون لنفس العنصر أكثر من قمية لخاصية id.

<h1 id="heading title"> CSS Selectors </h1>
<p id="paragraph" class="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
<p id="dummy" class="dummy"> dummy text of the printing </p>

not accepted

يمكن أن يكون للعنصر أكثر من class نفصل بينهم بمسافة أو أكثر ولكن يفضل مسافة واحدة.

<h1 id="heading" class="heading title"> CSS Selectors </h1>
<p id="paragraph" class="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
<p id="dummy" class="dummy"> dummy text of the printing </p>

</> Standardizing CSS class and id names
تسمية id و class مع عناصر HTML لتحديدها بلغة CSS

small يفضل كتابة id أو كلاس حروف صغيرة وكلمة واحدة فقط
case senstive الأسماء حساسة لحالة الأحرف حيث ABC مخلتفة عن abc.
special character غير مسموح بإستخدام العلامات مع الأسماء بإستثناء علامة dash [ - ].
dash في حال كتابة الأسم كلمتين يتم الفصل بينهم بعلامة dash [ - ].
starting with number يجب أن لا يبدأ الاسم بأرقام.
numbers accepted يمكن أن يحتوي الأسم علي أرقام بداية من الحرف الثاني وفي أي مكان أخر بأستثناء البداية.

Name accpted

إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML.

#logo

not accpted

إسم غير متوافق مع شروط تسمية قيم خصائص عناصر HTML.

#lo go

Name accpted

إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML.

#header-nav

not accpted

إسم غير متوافق مع شروط تسمية قيم خصائص عناصر HTML.

#5logo

Name accpted

إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML.

#logo5

Name accpted

إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML ولكن لا يفضل.

#LOGO

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

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

CSS Selectors
تحديد عناصر HTML بلغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Selectors CSS