CSSتحديد العناصر

مفهوم تحديد العناصر

تحديد العناصر ( Select Elements ) يقصد بها الطرق التي يمكنك من خلالها تحديد الوسوم التي سيتم إضافة خصائص CSS لها.

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

تحديد العنصر من خلال إسمه

في حال أردت إضافة خصائص CSS لكل الوسوم التي تملك إسم معين، أذكر إسم الوسم فقط و عندها سيتم إضافة الخصائص التي وضعتها لجميع الوسوم التي تملك نفس الإسم.

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

p {
    color: red;
    text-align: center;
} 

تحديد العنصر بواسطة الخاصيّة class

جميع وسوم HTML يمكن إضافة الخاصيّة class لها. هذه الخاصيّة ليس لها أي فائدة بالنسبة للغة HTML و لكن بالنسبة للغة CSS فهي مهمة جداً لأنه يمكنك بواسطة الوصول للوسوم من خلال أسماء الكلاسات التي تمررها لها كقيمة.

لتعريف كلاس في CSS ببساطة أكتب نقطة و يليها مباشرةً إسم الكلاس.
بعدها يمكنك تمرير إسم هذا الكلاس لأي وسم موجود في الصفحة من خلال وضع إسمه فقط (بدون النقطة) كقيمة للخاصيّة class.

في المثال التالي تم إضافة الخصائص التي وضعناها في الكلاس center لجميع الوسوم التي تملك نفس إسم الكلاس.
إذاً كل وسم يستخدم class="center" سيتم عرضه بلون أحمر و في الوسط.

.center {
    color: red;
    text-align: center;
} 

قواعد إختيار إسم class

• يفضّل أن تكون جميع أحرفه صغيرة.
• إذا كان إسمه يتألف من أكثر من كلمة يفضّل أن تضع شرطة - بين الكلمات.
• ممنوع أن يبدأ الإسم برقم و لكن لا مانع إن وضعت رقم في وسطه أو في آخره.
• أمثلة لأسماء مقبولة: btn - btn-primary

تحديد العنصر بواسطة الخاصيّة id

جميع وسوم HTML يمكن إضافة الخاصيّة id لها. عند إضافة هذه الخاصيّة في الوسم يجب إعطاءها قيمة موحّدة. أي قيمة لم يتم إعطاءها لأي وسم آخر موجود في الصفحة لأنه لا يجب وجود أكثر من وسم في الصفحة عندهم id بنفس الإسم.

لتعريف id في CSS ببساطة أكتب مربع # و يليه مباشرةً الإسم الذي تريد إعطاؤه له. بعدها يمكنك تمرير إسمه لأي وسم موجود في الصفحة من خلال وضع الإسم فقط (بدون المربع) كقيمة للخاصيّة id.

في المثال التالي تم إضافة الخصائص التي وضعناها في #demo للوسم الذي يملك id قيمته demo و بالتالي سيتم عرضه بلون أزرق و في الوسط.

#demo {
    color: blue;
    text-align: center;
} 

قواعد إختيار إسم id

• يفضّل أن تكون جميع أحرفه صغيرة.
• إذا كان إسمه يتألف من أكثر من كلمة يفضّل أن تكتب أول حرف من كل كلمة بشكل كبير.
• ممنوع أن يبدأ إسمه برقم و لكن لا مانع إن وضعت رقم في وسطه أو في آخره.
• أمثلة لأسماء مقبولة: top_menu - topMenu - menu

تحديد جميع عناصر الصفحة بواسطة *

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

في المثال التالي تم إضافة الخصائص التي وضعناها لكل الوسوم الموجودة في الصفحة.

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

تحديد العناصر المباشرة بواسطة >

في CSS يمكنك استخدام الرمز > لتحديد العناصر الموضوعة مباشرةً بداخل عنصر محدد.

في المثال التالي سيتم تلوين نص الوسم <p> بالأحمر في حال كان موضوع مباشرةً بداخل الوسم <article>.

article > p {
    color: red;
} 

تجميع الخصائص المشتركة

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

في المثال التالي قمنا بتحديد جميع وسوم <span> و <b> الموجودة في الصفحة.

span, b {
    color: red;
} 

تحديد الوسم نفسه أكثر من مرة

في HTML يمكنك تمرير أكثر من كلاس لنفس الوسم و عندها سيتم تنفيذ جميع الخصائص الموجودة في هذه الكلاسات عليه.

في المثال التالي قمنا بإعطاء العنصر إثنين كلاس، الكلاس الأول إسمه red و هو يجعل لون الخط أحمر و الثاني إسمه center و هو يجعل النص الموضوع فيه يظهر في الوسط.

.red {
    color: red;
} 

.center {
    text-algin: center;
} 

تضارب أسماء الخصائص المستخدمة

ترتيب الخصائص في CSS يترتب عليه بشكل تلقائي تحديد أولوية التنفيذ. فإذا قمت بإعطاء خاصيّة للعنصر و من ثم قمت بإعطائه قيمة جديدة لنفس الخاصيّة فإنه سيتم إعطاؤه القيمة الجديدة.

في المثال التالي قمنا بإعطاء العنصر إثنين كلاس، الكلاس الأول إسمه red و هو يجعل لون الخط أحمر و الثاني إسمه blue و هو يجعل لون الخط اللون أزرق.
لاحظ أنه سيتم تلوين الخط بالأزرق لأننا قمنا بتعريف الكلاس blue بعد الكلاس red.

.red {
    color: red;
} 

.blue {
    color: blue;
}