المحددات Selectors في css

ما هو المحدد Selector ؟

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

تتوفر عدة أنواع من المحددات في CSS ، فلنلق نظرة عن كثب على بعض منها :

المحدد العام Universal Selector

يتطابق المحدد العام universal selector ، الذي يُشار إليه بعلامة النجمة (*) ، مع كل عناصر صفحة الويب.
قد يتم إهمال المحدد العام في حالة وجود شروط أخرى على العنصر. غالبًا ما يستخدم هذا المحدد لإزالة الهوامش margins و الحاشية الافتراضية paddings من العناصر لغايات الإختبار.

لفهم كيف يعمل المحدد العام لنجرب المثال التالي:

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على المحدد العام Universal Selector</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    </style>
    </head>
    <body>
    <h1>This is heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    
  

المخرجات

المحدد العام Universal Selector

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

ملاحظة:

يوصى بعدم استخدام المحدد العام * كثيرًا ، حيث أن هذا المحدد يطابق كل عنصر على صفحة الويب مما يضع الكثير من الضغط غير الضروري على المتصفحات. استخدم مُحدِّدات نوع العنصر Element Type Selectors أو محدد الفئة Class selector بدلاً من ذلك.


مُحدِّدات نوع العنصر Element Type Selectors

يطابق محدد نوع العنصر Element Type Selectors كل عنصر له نفس النوع في صفحة الويب .
دعنا نجرب مثالًا لنفهم كيف يعمل بشكل عملي:

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على مُحدِّدات نوع العنصر Element Type Selectors</title>
    <style>
    h1 {
    color: red;
    }
    p {
    color: blue;
    }
    </style>
    </head>
    <body>
    <h1>This is heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>

  

المخرجات

مُحدِّدات نوع العنصر Element Type Selectors

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


مُحدِّدات المُعرِّفات ID selectors

يُستخدم محدد المعرف ID selectors لتعريف قواعد النمط لعنصر واحد فريد داخل صفحة الويب.
يتم تعريف محدد المعرف بعلامة # متبوعة مباشرة بقيمة ID للعنصر .

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على مُحدِّدات المُعرِّفات ID selectors</title>
    <style>    
    #error {
    color: #ff0000;
    }
    </style>
    </head>
    <body>
    <p id="error">This is a warning!</p>
    </body>
    </html>

  

المخرجات

مُحدِّدات المُعرِّفات ID selectors

ملاحظة:

يجب أن تكون قيمة السمة id فريدة داخل صفحة الويب - مما يعني أنه لا يوجد عنصران في صفحةHTML يمكنهما مشاركة نفس قيمة السمة id


محددات الفئات Class Selectors

يمكن استخدام محددات الفئة class selectors لتحديد أي عنصر HTML له السمة class . يتم تنسيق جميع العناصر التي لها نفس قيمة السمة class وفقًا للقاعدة المحددة.
يتم تحديد محدد الفئة class selector بعلامة نقطة . متبوعة مباشرة بقيمة السمة class المراد تطبيق القواعد عليها .

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على محددات الفئات Class Selectors</title>
    <style>    
    .blue {
    color: #0000ff;
    }
    </style>
    </head>
    <body>
    <h1 class="blue">This is a heading</h1>
    <p class="blue">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    </body>
    </html>
  

المخرجات

محددات الفئات Class Selectors

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

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على محددات الفئات Class Selectors</title>
    <style>    
    p.blue {
    color: #0000ff;
    }
    </style>
    </head>
    <body>
    <h1 class="blue">This is a heading</h1>
    <p class="blue">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    </body>
    </html>

  

المخرجات

مثال محددات الفئات Class Selectors

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


محددات العناصر السليلة Descendant Selectors

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

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على محددات العناصر السليلة Descendant Selectors</title>
    <style>
    h1 em {
    color: green;
    }
    ul.menu {
    padding: 0;
    list-style: none;
    }
    ul.menu li{
    display: inline;
    }
    ul.menu li a {
    margin: 10px;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <h1>This is a <em>heading1</em></h1>
    <h2>This is a <em>heading2</em></h2>
    <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>        
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </body>
    </html>

  

المخرجات

محددات العناصر السليلة Descendant Selectors

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


محددات العناصر الأبناء Child Selectors

يتم استخدام محدد الإبن child selector لتحديد تلك العناصر فقط التي تكون أبناء مباشرة لبعض العناصر.
يتكون محدد الإبن child selector من محددين أو أكثر مفصولين برمز أكبر من >. يمكنك استخدام هذا المحدد ، على سبيل المثال ، لتحديد المستوى الأول لعناصر القائمة داخل قائمة متداخلة تحتوي على أكثر من مستوى واحد.
ولتوضيح آلية عملها لنلقي نظرة على المثال التالي :

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على محددات العناصر الأبناء Child Selectors</title>
    <style>
    ul > li {
    list-style: square;
    }
    ul > li ol {
    list-style: none;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>        
    <li>
    <a href="#">Services</a>
    <ol>
    <li><a href="#">Design</a></li>
    <li><a href="#">Development</a></li>
    </ol>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>
    </body>
    </html>
  

المخرجات

محددات العناصر الأبناء Child Selectors

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


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

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

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

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على محددات الأخوة المتجاورة Adjacent Sibling Selectors</title>
    <style>
    h1 + p {
    color: blue;
    font-size: 18px;
    }
    ul.task + p {
    color: #f0f;
    text-indent: 30px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ul class="task">
    <li>Task 1</li>
    <li>Task 2</li>
    <li>Task 3</li>
    </ul>
    <p>This is one more paragraph.</p>
    <p>This is also a paragraph.</p>
    </body>
    </html>
  

المخرجات

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


محددات الأخوة العامة General Sibling Selectors

تشبه محددات الأخوة العامة General Sibling Selectors محددات الأخوة المتجاورة Adjacent Sibling Selectors إلى حَدٍّ ما . يتكون محدد الإخوة العام من محددين بسيطين مفصولين بالرمز (~). يمكن كتابتها بالشكل التالي: E1 ~ E2 ، حيث E2 هو هدف المحدد.
سيحدد المحدد h1 ~ p في المثال أدناه جميع عناصر <p> التي سبقتها عنصر <h1> ، حيث تشترك هذه العناصر في نفس العنصر الأب في صفحة الويب.

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على محددات الأخوة العامة General Sibling Selectors</title>
    <style>
    h1 ~ p {
    color: blue;
    font-size: 18px;
    }
    ul.task ~ p {
    color: #f0f;
    text-indent: 30px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ul class="task">
    <li>Task 1</li>
    <li>Task 2</li>
    <li>Task 3</li>
    </ul>
    <p>This is one more paragraph.</p>
    <p>This is also a paragraph.</p>
    </body>
    </html>

  

المخرجات

محددات الأخوة العامة General Sibling Selectors


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

غالبًا ما تتشارك العديد من المحدِّدات في ورقة الانماط نفس إعلانات قواعد النمط style rules declarations. يمكننا تجميع هذه القواعد في قائمة مفصولة بفواصل (,) لتقليل حجم الكود في ورقة الأنماط.
نلقي نظرة:

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على محددات CSS بدون تجميع</title>
    <style>
    h1 {
    font-size: 36px;
    font-weight: normal;
    }
    h2 {
    font-size: 28px;
    font-weight: normal;
    }
    h3 {
    font-size: 22px;
    font-weight: normal;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading of level 1</h1>
    <h2>This is a heading of level 2</h2>
    <h3>This is a heading of level 3</h3>
    </body>
    </html>
  

المخرجات

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

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

مثال
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>مثال على تجميع المحددات</title>
    <style>
    h1, h2, h3 {
    font-weight: normal;
    }
    h1 {
    font-size: 36px;
    }
    h2 {
    font-size: 28px;
    }
    h3 {
    font-size: 22px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading of level 1</h1>
    <h2>This is a heading of level 2</h2>
    <h3>This is a heading of level 3</h3>
    </body>
    </html>

  

المخرجات

مثال تجميع المحددات Grouping Selectors

كورس css


عدد الموضوعات 28 الخاصة ب كورس  ' css3 '   العدد الكلي .
عنوان الموضوعالتاريخكورس css3
محددات السمات Attribute Selectors في css2021-10-08الدرس 28 css3
الخاصية Opacity في css2021-10-07الدرس 27 css3
أنواع الوسائط Media Types في # css #2021-10-07الدرس 26 css3
العناصر الزائفة Pseudo-elements في css2021-10-07الدرس 25 css3
الفئات الزائفة Pseudo-classes في css2021-10-07الدرس 24 css3
المحاذاة alignment في css2021-10-07الدرس 3 css3
الخاصية Float في css 2021-10-05الدرس 23 css3
الطبقات Layers في css2021-10-05الدرس 22 css3
موقع العناصر position في css2021-10-05الدرس 21 css3
الخاصية Display و الخاصية Visibility في css2021-10-05الدرس 20 css3
التنسيق المرئي Visual Formatting في css2021-10-05الدرس 19 css3
الخاصية Overflow في css2021-10-05الدرس 18 css3
التخطيط Outlines في css2021-10-05الدرس 17 css3
المؤشرات Cursors في css2021-10-04الدرس 16 css3
الهوامش Margin في css2021-10-04الدرس 15 css3
الحدود Borders في css2021-10-04الدرس 14 css3
الحواشي Padding في css2021-10-04الدرس 13 css3
التحكم في الأبعاد css2021-10-04الدرس 12 css3
نموذج الصندوق css2021-10-04الدرس 11 css3
الجداول tables في css2021-10-04الدرس 10 css3
القوائم Lists في CSS2021-10-03الدرس 9 css3
الروابط Links في CSS2021-10-03الدرس 8 css3
النصوص Text في css2021-10-02الدرس 7 css3
الخطوط Fonts في css 2021-10-02الدرس 6 css3
الخلفيات Background في css2021-10-02الدرس 5 css3
الألوان Colors في css2021-10-01الدرس 3 css3
المحددات Selectors في css2021-10-01الدرس 4 css3
بناء جملة CSS2021-10-01الدرس 3 css3
البداية مع CSS إضافة أنماط (Styles) إلى عناصر HTML2021-10-01الدرس 2 css3
دورة CSS المجانية من البداية حتى الإحتراف بالتطبيق العملي2021-09-30الدرس 1 css3