شرح CSS selectors | أساسيات CSS

 

بالعودة إلى درس الروابط والصور، تعلمنا كيفية توصيل مستند HTML بالملفات الأخرى في مشروعنا. “CSS selectors” هي نفس الشيئ، باستثناء أنه بدلاً من التنقل بين الملفات بأكملها، تسمح لنا selectors بتعيين قاعدة CSS واحدة لعنصر HTML محدد. هذا يجعل من الممكن تحديد نمط العناصر الفردية بشكل انتقائي مع تجاهل الآخرين.

combinator هو الشيء الذي يحدد العلاقة بين المحددات. في هذا الدرس، سنتعرف على أنواع التركيبات في CSS.




يمكن أن يحتوي selector في CSS على أكثر من selector بسيط. بين selectors البسيطة، يمكننا استخدام المجمعات.

الأنواع الأربعة للتركيبات في CSS3 هي:

 ● Descendant selector (space)
 ● Child selector (>)
 ● Adjacent sibling selector (+)
 ● General sibling selector (~)

Descendant selector (space)

المحدد الفرعي يطابق جميع العناصر المنحدرة من عنصر محدد.

في المثال أدناه، يقوم المحدِّد بتنسيق جميع عناصر <p> داخل عناصر <div> على الصفحة بلون خلفية أصفر:

div p {
background-color: yellow;
}

Child selector (>)

يحدد المحدِّد الفرعي جميع العناصر التي هي أبناء عنصر محدد.

يحدد المثال التالي جميع عناصر <p>  التي هي أطفال لعنصر div:

div > p {
background-color: yellow;
}

Adjacent sibling selector (+)


يقوم المحدِّد أيضًا بتحديد الأصل المجاور لجميع العناصر التي ترتبط أولاً بالعنصر المحدد (الأخ والأب) وثانيًا المجاورة للعنصر المحدد.

يجب أن تحتوي عناصر نفس الأصل أو العرق على نفس العنصر الأصل، والوسائل المجاورة لاتباع العنصر المحدد دون وسطاء.

يحدد المثال التالي جميع عناصر <p> التي يتم وضعها مباشرة بعد عناصر <div>:

div + p {
background-color: yellow;
}

General sibling selector (~)

يحدد المحدِّد أيضًا السلف العام لجميع العناصر التي هي سلف عنصر معين:

في المثال أدناه، يحدد المحدد المحدد جميع  عناصر <p> التي هي أصل عناصر <div> :

div ~ p {
background-color: yellow;
}


 

كلمات مفتاحية: