CSS Selectors
تحديد عناصر HTML بلغة CSS
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Selectors
تحديد عناصر HTML بلغة CSS
</>
CSS Selector
تحديد عناصر HTML بلغة CSS
Selector هو طريقة لتحديد وإختيار عنصر أو مجموعة عناصر داخل صفحة HTML لكي نقوم بإضافة Style تنسيقات على هذا العنصر.
تنقسم Selectors إلي خمسة تصنيفات:
- 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 {
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
| 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
محددات
فئة
نمط أو شكل
اسم العلامة
سمة
قيمة
عنصر الطفل للHTML
اعلان
خاصية
عنصر
أقواس متعرجة
كتلة
نقطتان
فاصلة منقوطة
فقرة
اسم الفئة
فريد / لايتكرر
اسم معرف الهوية
شعار
علامة الشباك
نقطة
علامة تسطير سفلي
تنقل
علامة الناقص
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
