3-محددات CSS

تُستخدم محددات CSS “لاكتشاف” (أو تحديد) عناصر HTML التي تريد تطبيق أنماط عليها.

هناك خمس فئات رئيسية لمحددات CSS:

1. بسيطة: تستخدم اسم العنصر أو معرفه أو فئته.
2. مركبة: تحدد مجموعات من العناصر بناءً على علاقاتها.
3. فئة زائفة: تحدد العناصر بناءً على حالتها الحالية.
4. عنصر زائف: تحدد وتصمم جزءًا معينًا من عنصر.
5. سمة: تحدد العناصر بناءً على سماتها أو قيمة السمة.

ستغطي هذه الصفحة أبسط أنواع محددات CSS.

محدد العنصر في CSS

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

مثال:

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

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

محدد المعرف (id) في CSS

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

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

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

مثال:

سيتم تطبيق قاعدة CSS التالية على عنصر HTML الذي يحمل المعرف “para1”:

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

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

شرح:

تتكون أسماء المعرفات من أحرف أبجدية أو أرقام أو رموز المسافة أو الأشرطة المائلة السفلية. لا يمكن أن تبدأ أسماء المعرفات برقم.

محدد الفئة (class) في CSS

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

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

مثال:

في هذا المثال، ستكون جميع عناصر HTML ذات الفئة “center” حمراء اللون ومركزة:

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

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

مثال:

في هذا المثال، ستكون عناصر الفقرة <p> ذات الفئة “center” فقط حمراء اللون ومركزة:

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

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

مثال:

في هذا المثال، سيتم تصميم عنصر <p> وفقًا للفئة “center” والفئة “large”:

<p class="center large">This paragraph refers to two classes.</p>

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

محدد العنصر الشامل (universal selector) في 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 البسيطة