info@semi-colen.com 002-010-90-2500-88
May 29, 2020 - بواسطة مشرف

محددات CSS

محددات CSS


تستخدم محددات CSS في "العثور" (أو تحديد) عناصر HTML التي تريد تصميمها.


يمكننا تقسيم محددات CSS إلى خمس فئات:


1- محددات بسيطة Simple selectors.

 (يحدد عناصر بناءً على الاسم والمعرف "id" والفئة "class")


2- محددات مركبة Combinator selectors

(يحدد عناصر بناءً على علاقة محددة بينها)


3- محددات الفئات "class" الزائفة Pseudo class selectors 

(يحدد عناصر بناءً على حالة معينة)


4- محددات العناصر "elements " الزائفة Pseudo-elements selectors

(يحدد جزءًا من عنصر ونمطه)


5- محددات السمة "Attribute selectors "Attribute

(يحدد عناصر بناءً على قيمة السمة أو السمة).

  • المحددات البسيطة Simple selectors.

           1- محدد العناصر "elements " في CSS


يختار محدد العنصر عناصر HTML بناءً على اسم العنصر.

مثال

{
  text-align: center;
  color: red;
}

           2- محدد المعرف "id" في CSS


يستخدم محدد id سمة المعرف لعنصر HTML لتحديد عنصر معين.

عنصر id فريد داخل صفحة ، لذلك يتم استخدام محدد id لتحديد عنصر فريد واحد.

لتحديد عنصر بمحدد الـ  (id) ، اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر.


مثال

#para1 {
  text-align: center;
  color: red;
}


           3- محدد الفئة "class" في CSS


يحدد محدد الفئة "class" عناصر HTML مع سمة فئة محددة.

لتحديد عناصر مع الفئة "class" المعينة ، اكتب حرف فترة (.) ، متبوعًا باسم الفئة.

مثال

.center {

  text-align: center;

  color: red;


}


يمكنك أيضًا تحديد عناصر HTML المحددة فقط يجب أن تتأثر بفئة.

مثال

p.center {
  text-align: center;
  color: red;
}

يمكن أن تشير عناصر HTML أيضًا إلى أكثر من فئة.

مثال

<p/> تشير هذه الفقرة إلى فئتين.<p class="center large">


           4- المحدد الشامل في CSS 

يحدد المحدد الشامل بـ (*) جميع عناصر HTML في الصفحة.

مثال

{
  text-align: center;
  color: blue;
}


           5- محدد التجميع في CSS 


يختار محدد التجميع كل عناصر HTML بنفس تعريفات الأنماط.

انظر إلى كود CSS التالي (عناصر h1 و h2 و p لها نفس تعريفات الأنماط):

مثال

h1 {
  text-align: center;
  color: red;
}


h2 {
  text-align: center;
  color: red;
}


{
  text-align: center;
  color: red;
}

سيكون من الأفضل تجميع المحددات لتقليل الرمز.

لتجميع المحددات ، افصل كل محدد بفاصلة.

مثال

h1, h2, p {


  text-align: center;

  color: red;

}

  • المحددات المركبة Combinator selectors

  • يمكن أن يحتوي محدد CSS على أكثر من محدد بسيط. بين المحددات البسيطة ، يمكننا تضمين أداة دمج.


    هناك أربع وحدات دمج مختلفة في CSS: -


    1- المحددات السليلة Descendant Selector (مساحة).

    2- المحددات الفرعية Child selectors (>).

    3- محددات الأخوة المجاورة Adjacent Sibling Selector (+).

    4- محددات الأخوة العام General Sibling Selector (~).


             1- المحددات السليلة Descendant Selector: -


    المحددات السليلة الذي يُمثَّل عادةً بفراغٍ واحد ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.


    يحدد المثال التالي جميع عناصر <p> داخل عناصر <div>:

    مثال

    } div p 


      background-color: yellow;

    {



             2- المحددات الفرعية Child selectors: -

    يختار المحدد الفرعي جميع العناصر التي هي عناصر تابعة لعنصر محدد.

    يحدد المثال التالي جميع عناصر <p> التي تعتبر عناصر لعنصر <div>:

    مثال

    div > p {
      background-color: yellow;
    }

     3- المحددات الأخوة المجاورة Adjacent Sibling Selector


    يختار محددات الأخوة المجاورة جميع العناصر التي هي الأشقاء المجاورين لعنصر محدد.

    يجب أن تحتوي عناصر الأخوة على نفس العنصر الأصلي ، وتعني كلمة "المجاورة" "التالية مباشرة".

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

    مثال

    div + p {
      background-color: yellow;
    }

      4- محددات الأخوة العام General Sibling Selector


    يحدد محددات الأخوة العام جميع العناصر التي هي أشقاء عنصر محدد.

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

    مثال

    div ~ p {
      background-color: yellow;}