سنتحدث اليوم عن بعض الـ Selectors فـ لـغة الـ CSS

بعض الناس تقـابل مشـاكل فى فهمهم ...

باذن الله بعد هذا المقـال ستفهمهم بالتفصــيل ان شاء الله

سنتناول 3 من الـ selectors المهمين جداا فى لـغة ال CSS

وهما ( + , ~ , < )

1) الـ Selector + :

ويطلـق عليـه فـ لـغة الـ CSS باسم Adjacent sibling selector

ويعنـى الاخ (المجاور ) التالى مبـاشراا للعنصـر وتذكر انى قلت ( التالى وليس السابق )

شاهد المثـال لتفهم أكثـر : http://codepen.io/anon/pen/mEYvwg

هنا فى المثال : قلت الـ p التالى مبااشرا لل div

فسيعمل على أول p بعد ال div مبـاشراا

محوظة : اذا فصلت بين ال p و div بأى عنـصر آخر فلن تعمل الخاصية

لان الـ p لم يعد مجااورا للـ div

2) الـ Selector ~

ويطلق عليـه فى لـغة الـ CSS باسم global sibling selector

ويعنى جميع الاشـقاء التاليين للـعنصر وليس السابقيـن

شاهد المثال : http://codepen.io/anon/pen/LkoqOJ

هنا فى المثال تم تلوين جميع ال p التاليين لل div

لان هذا ال selector يعنى جميع الاشقاء ( الاخوه ) التاليين للعنصر المحدد

ملحوظه : اذا فصـلت بين ال p و div باى عنصر آخـر .. ستعمل الخـاصيه بطريقه عاديه جدا

ليـست كمثـل الـ selector +

3) الـ Selector <

ويطلق عليه فـ لغـة الـ CSS باسم Direct Child

ويعنى الابن المبــاشر للعنصـر

شاهد المثـال : http://codepen.io/anon/pen/jAodpV

وهنا فى المثال تلون جميع ال span التى بداخل ال div مباشراا

وليس باى عنصر اخر غير ال div

وال span الاخير لم يتلون لانه ليس ابن مباشر لل div بل هو ابن مباشر لل p

وهكذا تم التفرقه بامثله بين ال 3 selectors

وبهذا تم انتهاء الشرح واتمنى ان يكون مفيد ويفيد اى شخـص

وجزاكم الله خيرا والسلام عليكم ورحمه الله