المحددات (Selectors) — تصميم CSS

المحددات (Selectors)

المحدد يجيب عن سؤال: أي العناصر تتأثر بهذه القاعدة؟

المحددات الأساسية

p { color: #333; }              /* كل الفقرات */
.card { padding: 16px; }        /* كل عنصر فيه class="card" */
#site-header { height: 64px; }  /* العنصر الذي id="site-header" */
* { box-sizing: border-box; }   /* كل العناصر */

<header id="site-header">...</header>
<div class="card featured">بطاقة لها صنفان</div>

- العنصر يمكن أن يحمل عدة أصناف مفصولة بمسافة.

- الـ id فريد في الصفحة. للتنسيق فضّل الأصناف دائماً: قابلة لإعادة الاستخدام، وأولويتها أقل (لن تحتاج لاحقاً قواعد أقوى لتغلبها).

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

h1, h2, h3 { font-family: "Cairo", sans-serif; }  /* تجميع: قاعدة لعدة محددات */
.card.featured { border-color: gold; }            /* دمج: عنصر فيه الصنفان معاً */
button.primary { background: navy; }              /* زر فيه الصنف primary */

لاحظ الفرق: .card.featured (بلا مسافة) عنصر واحد له الصنفان، أما .card .featured (بمسافة) فعنصر featured داخل card.

علاقات العناصر (Combinators)

| المحدد | يطابق |

|---|---|

| nav a | كل a داخل nav (بأي عمق) |

| ul > li | li ابن مباشر لـ ul فقط |

| h2 + p | أول p يأتي مباشرة بعد h2 |

| h2 ~ p | كل p يأتي بعد h2 بنفس المستوى |

.menu > li { display: inline-block; }   /* المستوى الأول فقط، لا القوائم الفرعية */
h2 + p { font-size: 1.1em; }            /* الفقرة الافتتاحية بعد كل عنوان */

محددات الخصائص

a[target="_blank"] { padding-inline-end: 16px; }   /* روابط تفتح تبويباً جديداً */
input[type="email"] { direction: ltr; }             /* البريد يُكتب من اليسار */
a[href^="https"] { color: green; }                  /* يبدأ بـ */
a[href$=".pdf"] { font-weight: bold; }              /* ينتهي بـ */

نصائح للتسمية

- سمِّ الأصناف حسب الدور لا الشكل: .btn-danger أفضل من .red-button (ماذا لو صار برتقالياً؟).

- تجنب المحددات الطويلة جداً مثل body div.main ul li a: هشّة (تنكسر عند تغيير HTML) وصعبة الغلبة. صنف واحد على العنصر غالباً أوضح.

تمرين

في صفحتك الشخصية: لوّن روابط القائمة فقط (nav a)، واجعل أول فقرة بعد كل h2 أكبر قليلاً، وأضف صنفاً .highlight لبطاقة مشروع مميزة بحدود ذهبية.

/* محدد العنصر */
p {
    color: gray;
}

/* محدد الـ Class - نقطة + اسم */
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

/* محدد الـ ID - # + اسم */
#header {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
}

/* المحدد العام */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* محددات مركبة */
div.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* المحدد التنازلي */
nav ul li a {
    text-decoration: none;
}