محددات CSS

محددات CSS

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

يمكننا تصنيف اختيارات CSS إلى خمس فئات:

هذا الصفح يشرح أقل ما يمكن من اختيارات CSS.

محدد عنصر CSS

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

مثال

في هذا المثال، سيتم تعديل جميع عناصر <p> في الصفحة لتكون متجهة إلى الوسط وللحصول على لون النص الأحمر:

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

جربها بنفسك

اختيار id في CSS

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

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

لاختيار العنصر الذي يحتوي على id معين، اكتب رمز العلامة المزدوجة (＃)، ثم id العنصر.

مثال

سيطبق هذا القاعدة CSS على العنصر HTML الذي يحتوي على id="para1":

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

جربها بنفسك

ملاحظة:لا يمكن أن تبدأ اسم الصفحة بالرقم.

اختيار الصفحة في CSS

اختيار الصفحة يختار العناصر HTML التي تحتوي على صفة معينة.

لاختيار العناصر التي تحتوي على صفة معينة، اكتب رمز النقطة (.)، ثم اسم الصفة.

مثال

في هذا المثال، سيكون جميع العناصر HTML التي تحتوي على class="center" حمراء ومتجهة إلى الوسط:

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

جربها بنفسك

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

مثال

في هذا المثال، سيتم تعديل فقط عنصر <p> الذي يحتوي على class="center" لتحقيق التوجيه إلى الوسط:

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

جربها بنفسك

يمكن لعنصر HTML أن يشير إلى عدة صفوف.

مثال

في هذا المثال، عنصر <p> سيتم تعيينه لأسلوبه بناءً على class="center" و class="large":

<p class="center large">هذا الفقرة يشير إلى نوعين من الصفوف.</p>

جربها بنفسك

ملاحظة:لا يمكن أن تبدأ اسم الصفحة بالرقم!

اختيار العام في CSS

اختيار العام (*) يختار جميع العناصر HTML في الصفحة.

مثال

القواعد التالية من CSS ستؤثر على كل عنصر HTML في الصفحة:

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

جربها بنفسك

اختيار المجموعات في CSS

اختيار المجموعات يختار جميع العناصر HTML التي تحتوي على تعريف أسلوب مشابه.

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

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

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

لإضافة خيارات إلى مجموعة، استخدم نقطة العطف للفصل بين كل خيار.

مثال

في هذا المثال، نقوم بتجميع المربعات المذكورة في الكود السابق من خلال الخيارات التالية:

h1, h2, p {
  text-align: center;
  color: red;
}

جربها بنفسك

جميع اختيارات CSS البسيطة

مستخدمو الخيارات مثال وصف المثال
.class .intro اختيار جميع العناصر التي تحتوي على class="intro".
#id #firstname اختيار العنصر ذي id="firstname".
* * اختيار جميع العناصر.
عنصر p اختيار جميع عناصر <p>.
عنصر,عنصر,.. div, p اختيار جميع عناصر <div> وكل عناصر <p>.

قراءة متعمقة

كتب خارجية:محدد عنصر CSS

كتب خارجية:تجميع محددي selectors CSS

كتب خارجية:تفسير محددي selectors CSS

كتب خارجية:تفسير محددي selectors CSS

كتب خارجية:تفسير محددي selectors CSS

كتب خارجية:محدد سلف CSS

كتب خارجية:محدد عنصر فرعي CSS

كتب خارجية:محدد أخ ك近 CSS