محدد CSS هو نمط يطابق العناصر الموجودة على صفحة الويب. سيتم تطبيق قواعد النمط المرتبطة بهذا المحدد على العناصر التي تطابق نمط المحدد.

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

تتوفر عدة أنواع من المحددات في CSS ، دعنا نلقي نظرة فاحصة عليها:

محدد عالمي

المحدد العام ، يُشار إليه بعلامة النجمة ( *) ، يطابق كل عنصر على الصفحة.

قد يتم حذف المحدد العام في حالة وجود شروط أخرى على العنصر. غالبًا ما يستخدم هذا المحدد لإزالة الهوامش والحشوات الافتراضية من العناصر لغرض الاختبار السريع.

دعنا نجرب المثال التالي لفهم كيفية عمله بشكل أساسي:

* {
    margin: 0;
    padding: 0;
}

سيتم تطبيق قواعد النمط داخل *المحدد على كل عنصر في المستند.

محددات نوع العنصر

محدد نوع العنصر يطابق كل تواجد العنصر في المستند مع اسم نوع العنصر المقابل. دعنا نجرب مثالاً لنرى كيف يعمل بالفعل:

p {
    color: blue;
}

سيتم تطبيق قواعد النمط داخل pالمحدد على كل <p>عنصر (أو فقرة) في المستند ولونه باللون الأزرق ، بغض النظر عن موضعه في شجرة المستند.

محددات الهوية

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

يتم تعريف محدد الهوية بعلامة تجزئة ( #) متبوعة مباشرة بقيمة المعرف.

#error {
    color: red;
}

تعرض قاعدة النمط هذه نص عنصر باللون الأحمر ، idتم تعيين السمة الخاصة به على error.

محددات الفئة

يمكن استخدام محددات الفئة لتحديد أي عنصر HTML له classسمة. سيتم تنسيق جميع العناصر التي تحتوي على هذه الفئة وفقًا للقاعدة المحددة.

يتم تعريف محدد الفئة بعلامة فترة ( .) متبوعة مباشرة بقيمة الفئة.

.blue {
    color: blue;
}

تعرض قواعد النمط أعلاه النص باللون الأزرق لكل عنصر في المستند تم classتعيين السمة عليه blue. يمكنك جعلها أكثر خصوصية. علي سبيل المثال:

p.blue {
    color: blue;
}

تعرض قاعدة النمط داخل المحدد p.blueالنص باللون الأزرق <p>للعناصر التي تم classتعيين سمة عليها فقط blue، وليس لها أي تأثير على الفقرات الأخرى.

محددات النسب

يمكنك استخدام هذه المحددات عندما تحتاج إلى تحديد عنصر تابع لعنصر آخر ، على سبيل المثال ، إذا كنت تريد استهداف نقاط الارتساء الموجودة في قائمة غير مرتبة فقط ، بدلاً من استهداف جميع عناصر الارتساء. دعونا نرى كيف يعمل:

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

يتم تطبيق قواعد النمط داخل المحدد ul.menu li aفقط على تلك <a>العناصر الموجودة داخل <ul>عنصر له فئة .menu، وليس لها أي تأثير على الروابط الأخرى داخل المستند.

وبالمثل ، سيتم تطبيق قواعد النمط داخل h1 emالمحدد فقط على تلك <em>العناصر الموجودة داخل <h1>العنصر وليس لها تأثير على <em>العناصر الأخرى.

محددات الأطفال

يتم استخدام المحدد الفرعي لتحديد العناصر الفرعية المباشرة لبعض العناصر فقط.

يتكون المحدد الفرعي من اثنين أو أكثر من المحددات مفصولة برمز أكبر من ( >). يمكنك استخدام هذا المحدد ، على سبيل المثال ، لتحديد المستوى الأول من عناصر القائمة داخل قائمة متداخلة تحتوي على أكثر من مستوى. دعنا نتحقق من مثال لفهم كيفية عمله:

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

يتم تطبيق قاعدة النمط داخل المحدد ul > liفقط على تلك <li>العناصر التي هي عناصر فرعية مباشرة <ul>للعناصر ، وليس لها تأثير على عناصر القائمة الأخرى.

محددات الأخوة المجاورة

يمكن استخدام محددات الأشقاء المجاورة لتحديد العناصر الشقيقة (أي العناصر الموجودة في نفس المستوى). هذا المحدد له صيغة مثل: E1 + E2 ، حيث E2 هو هدف المحدد.

h1 + pسيحدد المحدِّد في المثال التالي <p>العناصر فقط إذا كان كل من العنصر <h1>والعناصر <p>يشتركان في نفس العنصر الرئيسي في شجرة المستند <h1>ويسبق <p>العنصر على الفور. هذا يعني فقط تلك الفقرات التي تأتي مباشرة بعد كل <h1>عنوان سيكون لها قواعد النمط المرتبطة. دعونا نرى كيف يعمل هذا المحدد في الواقع:

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

محددات الأشقاء العامة

محدد الأخوة العام مشابه لمحدد الأخوة المجاور (E1 + E2) ، لكنه أقل صرامة. يتكون محدد الأخوة العام من محددين بسيطين مفصولين ∼بحرف التلدة (). يمكن كتابتها مثل: E1 ∼ E2 ، حيث E2 هو هدف المحدد.

h1 ∼ pسيحدد المحدد في المثال أدناه جميع <p>العناصر التي يسبقها <h1>العنصر ، حيث تشترك جميع العناصر في نفس العنصر الرئيسي في شجرة المستند.

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

هناك محددات أكثر تعقيدًا مثل محددات السمات ، والفئات الزائفة ، والعناصر الزائفة . سنناقش حول هذه المحددات بالتفصيل في الفصول القادمة.

محددات التجميع

غالبًا ما تشترك عدة محددات في ورقة أنماط في نفس إعلانات قواعد النمط. يمكنك تجميعها في قائمة مفصولة بفواصل لتقليل الكود في ورقة الأنماط الخاصة بك. كما أنه يمنعك من تكرار نفس قواعد النمط مرارًا وتكرارًا. لنلقي نظرة:

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

كما ترى في المثال أعلاه ، font-weight: normal;تتم مشاركة قاعدة النمط نفسها بواسطة المحددات h1، h2وبالتالي h3يمكن تجميعها في قائمة مفصولة بفواصل ، على النحو التالي:

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}