CSS Combinators

-

Combinators هو طريقة لتوضيح العلاقة بين selectors و selectors وهي HTML tag (مثل، <p>، <Div>، <img>، ... الخ). حيث يمكن استخدام هذه الطريقة لتطبيق CSS على اكثر من selectors بنفس الوقت. 

تمام  

في CSS يوجد 4 أنواع لتطبيق Combinators وهم :

  • descendant selector (space) (المحدد التابع) يستخدم مسافة بين المحددات
  • child selector (>) (المحدد الابن) ويستخدم الإشارة > )
  • adjacent sibling selector (+) ( المحدد المجاور ويستخدم الإشارة + )
  • general sibling selector (~)( المحدد العام ويستخدم الإشارة ~ )

تمام نفهم شو يعني الإشارات المذكورة 

النوع الأول descendant selector (space) 

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

مثال :


<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: rgb(228, 228, 212);
  border: 1px solid gray;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
}
</style>
</head>
<body>
    <div>
        <p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
    </div>
    <div>
        <p > كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
        <section><p> لا تعبدوا الله كي يعطي، بل اعبدوه كي يرضى، فإذا رضي أدهشكم بعطائه. </p></section>
    </div>
    <section>
        <p> إذا أردت أن ينجز عملك فقم به وحدك، وإذا أردت لعملك أن لا ينجز فكلف به غيرك.
        </p>
    </section>
</body>
</html>

شغل الصفحة ونشوف النتيجة 

تمام نفهم شو عملنا 
في CSS طبقنا الكود :
div p {
  background-color: rgb(228, 228, 212);
  border: 1px solid gray;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
}
هذا الكود يعني ان يتم تطبيق هذه الخصائص على جميع div element بالإضافة الى p element التابعة لها ، ولاحظ النتيجة تم تطبيق هذه الخصائص على جميع <div> و <p>  باستثناء <p> الأخير والسبب ان خارج حدود  <div>غير تابع لها.
باستخدام هذه الطريقة يمكن تطبيق كود واحد على اكثر من HTML element حسب الحاجة.

النوع الثاني Child Selector (>)

في هذا النوع يتم تطبيق ال CSS على جميع  elements الأبناء التابعة ل element الأب بحيث لا يوجد أي element بينهم بالإضافة الى تطبيق الخصائص على element الأب ، بمعنى يمكن تطبيق مجموعة من الخصائص CSS على اكثر من HTML element في مكان واحد وتستخدم الإشارة > لذلك.
تمام نشوف مثال 
نفس المثال السابق نعمل تعديل بسيط ليكون بالشكل التالي :


<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: rgb(228, 228, 212);
  border: 1px solid gray;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
}
</style>
</head>
<body>
    <div>
        <p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
    </div>
    <div>
        <p > كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
        <section><p> لا تعبدوا الله كي يعطي، بل اعبدوه كي يرضى، فإذا رضي أدهشكم بعطائه. </p></section>
    </div>
    <section>
        <p> إذا أردت أن ينجز عملك فقم به وحدك، وإذا أردت لعملك أن لا ينجز فكلف به غيرك.
        </p>
    </section>
</body>
</html>
شغل الصفحة ونشوف النتيجة 


لاحظ نتيجة التنفيذ تم تطبيق الخصائص على <div> و <p> التابعة لها بشكل مباشر، بينما يوجد <p> داخل <section> داخل <div>لم يتم تطبيق الخصائص عليها السبب عدم ارتباطها بشكل مباشر مع <div> 

النوع الثالث : Adjacent Sibling Selector (+)( المحدد المجاور)

في هذا النوع يتم تطبيق ال CSS على جميع  elements الأبناء فقط التابعة ل element الأب بشكل مباشر (لا يوجد أي element بعدها)  ولا يتم تطبيق الخصائص على الأب، يمعنى يمكن تطبيق مجموعة من الخصائص CSS على اكثر من HTML element في مكان واحد وتستخدم الإشارة + لذلك.
مثال :
نرجع لمثالنا السابق ونعمل تعديل بسيط :

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: rgb(228, 228, 212);
  border: 1px solid gray;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
}
</style>
</head>
<body>
    <div>
        <p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
    </div>
    <div>
        <p > كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
        <section><p> لا تعبدوا الله كي يعطي، بل اعبدوه كي يرضى، فإذا رضي أدهشكم بعطائه. </p></section>
    </div>
    <p> إذا أردت أن ينجز عملك فقم به وحدك، وإذا أردت لعملك أن لا ينجز فكلف به غيرك.
    </p>
    <section>
        <p> إذا أردت أن ينجز عملك فقم به وحدك، وإذا أردت لعملك أن لا ينجز فكلف به غيرك.
        </p>
    </section>
<div></div>
    <p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</body>
</html>
شغل الصفحة وشوف النتيجة بتكون:


لاحظ ان <p> الي بتكون بعد <div> مباشرة هي الي تم تطبيق الخصائص عليها ، وما تم التطبيق على <div> 

النوع الرابع general sibling selector (~)( المحدد العام ويستخدم الإشارة ~ )

في هذا النوع يتم تطبيق ال CSS على جميع  elements فقط بعد ل element الأب ولا يتم تطبيق الخصائص على الأب، يمعنى يمكن تطبيق مجموعة من الخصائص CSS على اكثر من HTML element في مكان واحد وتستخدم الإشارة ~  لذلك.

<!DOCTYPE html>
<html>
<head>
<style>
div ~  p {
  background-color: rgb(228, 228, 212);
  border: 1px solid gray;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
}
</style>
</head>
<body>
    <div>
        <p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
    </div>
    <div>
        <p > كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
        <section><p> لا تعبدوا الله كي يعطي، بل اعبدوه كي يرضى، فإذا رضي أدهشكم بعطائه. </p></section>
    </div>
    <p> إذا أردت أن ينجز عملك فقم به وحدك، وإذا أردت لعملك أن لا ينجز فكلف به غيرك.
    </p>
    <div>
        <p> إذا أردت أن ينجز عملك فقم به وحدك، وإذا أردت لعملك أن لا ينجز فكلف به غيرك.
        </p>
    </div>
    
    <section><p> لا تعبدوا الله كي يعطي، بل اعبدوه كي يرضى، فإذا رضي أدهشكم بعطائه. </p></section>
<div></div>
    <p>  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</body>
</html>
شغل الصفحة وشوف النتيجة (الصورة تحت)