تعلم CSS – المحددات الجزء الثاني ( Selectors Combinations )

نبذة عامة

سنتعرف بشكل أكثر تفصيلي لإستهداف عناصر الـ HTML

 

تحديد عدة عناصر

يمكن تحديد عدة عناصر لإعطائها نفس التنسيق بالـ CSS ويتم الفصل بين كل محدد ومحدد بالفاصلة ( , ) comma

h1,
h3,
h4,
h5 {
	color: red;
}

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

 

 

ليس شرطاََ ان يكون المحدد فقط العنصر نفسه ، ممكن أن يكون اسم class أو اسم id وممكن أن يكون التلاثة مجتمعين معاََ

/* Selecting multiple HTML element types */
h1, p {
  border: 1px solid black;
}
 
/* Selecting styles to be applied to several classes */
.class-1, .class-2 {
  font-size: 20px;
}
 
/* Using multiple kinds of selectors*/
h3, .red, #redElement{
  color: red;
}

 

تحديد العناصر المتداخلة

من المعروف أنه يمكن كتابة أكثر من عنصر داخل عنصر أخر في الـ HTML  وهذا هو المعروف بالعناصر المتداخلة Nested

هل يمكن عمل تنسيق بالـ CSS لعنوان معين موجود داخل قسم معين ؟

نعم يمكن عمل ذلك وبكل سهولة ، وذلك فقط من خلال كتابة :

div h2 {
	color: red;
}

الكود السابق يعني أن اي عنوان <h2> في صفحتك بشرط أن يكون هذا العنوان داخل  <div> أعطيه هذه الخصائص .

 

 

يجب ان تلاحظ ان هنا التنسيق سيتم فقط لـ <h2> الموجود داخل الـ <div> ولن يتم التنسيق على الـ <div> نفسه .

بإمكانك أيضاََ تحديد عنصر معين موجود مباشرةََ داخل عنصر أخر وإعطاءه خصائص معينة ،في هذه الحالة يكون لدينا عنصر <div> يحتوي بداخله عدة عناصر اخرى من عناصر الـ html  كما المثال الاتي:

<div>
  <h1>Selecting Nested Elements with CSS</h1>
  <p>We can specify to only style elements within this div.</p>
  <div>
    <p>Elements can have any level of nesting and still be selected correctly.</p>
  </div>
</div>

في المثال اعلاه , لدينا عنصرين div ( يعتبران كعنصر أب )احداهما يندرج تحته 3 عناصر “ابناء” من الـ html  و الاخر يندرج تحته عنصر واحد  من الـ html

 

هنا اذا اردنا تحديد عنصر معين ضمن العناصر الداخلية “الابناء” , فيجب علينا تحديد العنصر الاب الذي يضم بداخله هذا الابن ومن ثم نتبعه باشارة < ومن ثم العنصر الداخلي “الابن” المراد تحديده

المثال التالي يوضح الفكرة :

/* select only for h1 elements within div's */
div > h1 {
  border-bottom: 1px solid black;
}

هذه الطريقة تمكننا من الوصول لأي عنصر داخلي  بشكل مباشرة من داخل الأب  , الاب ثم اشارة < ومن ثم نتدرج بالعناصر للوصول الى العنصر المطلوب ولا ننسى ان نفصل بينهم بالاشارة < ،  ( < ) هذه الإشارة تعني الإبن المباشر DIRECT children

انظر للمثال :

.box > p {
	color: red;
}

 

هذا الكود .box > p يعني ان العنصر <p> الموجود مباشرة تحت <div class=’box’> واذا كان داخل هذا البوكس يوجد <div> أخر ومن ثم داخله الـ <p> لن يتم تطبيق عليه هذه الخصائص ، يجب ان يكون <p> داخل البوكس مباشرة بدون أن يكون داخل اي عنصر أخر .

3