سنتحدث اليوم عن بعض الـ Selectors فـ لـغة الـ CSS
بعض الناس تقـابل مشـاكل فى فهمهم ...
باذن الله بعد هذا المقـال ستفهمهم بالتفصــيل ان شاء الله
سنتناول 3 من الـ selectors المهمين جداا فى لـغة ال CSS
وهما ( + , ~ , < )
1) الـ Selector + :
ويطلـق عليـه فـ لـغة الـ CSS باسم Adjacent sibling selector
ويعنـى الاخ (المجاور ) التالى مبـاشراا للعنصـر وتذكر انى قلت ( التالى وليس السابق )
شاهد المثـال لتفهم أكثـر :
http://codepen.io/anon/pen/...هنا فى المثال : قلت الـ p التالى مبااشرا لل div
فسيعمل على أول p بعد ال div مبـاشراا
محوظة : اذا فصلت بين ال p و div بأى عنـصر آخر فلن تعمل الخاصية
لان الـ p لم يعد مجااورا للـ div
2) الـ Selector ~
ويطلق عليـه فى لـغة الـ CSS باسم global sibling selector
ويعنى جميع الاشـقاء التاليين للـعنصر وليس السابقيـن
شاهد المثال :
http://codepen.io/anon/pen/...هنا فى المثال تم تلوين جميع ال p التاليين لل div
لان هذا ال selector يعنى جميع الاشقاء ( الاخوه ) التاليين للعنصر المحدد
ملحوظه : اذا فصـلت بين ال p و div باى عنصر آخـر .. ستعمل الخـاصيه بطريقه عاديه جدا
ليـست كمثـل الـ selector +
3) الـ Selector <
ويطلق عليه فـ لغـة الـ CSS باسم Direct Child
ويعنى الابن المبــاشر للعنصـر
شاهد المثـال :
http://codepen.io/anon/pen/...وهنا فى المثال تلون جميع ال span التى بداخل ال div مباشراا
وليس باى عنصر اخر غير ال div
وال span الاخير لم يتلون لانه ليس ابن مباشر لل div بل هو ابن مباشر لل p
وهكذا تم التفرقه بامثله بين ال 3 selectors
وبهذا تم انتهاء الشرح واتمنى ان يكون مفيد ويفيد اى شخـص
وجزاكم الله خيرا والسلام عليكم ورحمه الله
التعليقات