المحددات والتتالي
حدّد العناصر باستخدام محددات النوع والصنف وID والسمات. افهم التخصيص والوراثة والتتالي لتتنبأ بالأنماط الفائزة.
المحددات والتتالي درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هي CSS؟
CSS (أوراق الأنماط المتتالية) هي اللغة التي تتحكم في العرض المرئي. تكتب قواعد، وتحتوي كل قاعدة على محدد يستهدف العناصر وكتلة تصريحات تضم أزواج الخاصية والقيمة.
selector {
property: value;
another-property: value;
}محددات النوع والصنف والمعرّف
المحددات الأساسية الثلاثة: يستهدف النوع جميع عناصر الوسم (p)، ويستهدف الصنف العناصر التي تحمل صنفًا (.card)، ويستهدف المعرّف عنصرًا واحدًا باستخدام id (#logo). فضّل الأصناف، إذ تتمتع المعرّفات بدرجة خصوصية عالية جدًا.
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */محددات السمات والأصناف الزائفة
حدّد العناصر حسب قيمة السمة باستخدام [type="email"]. واستخدم الأصناف الزائفة للتعبير عن الحالة: :hover و:focus و:active و:checked و:nth-child() و:first-child و:last-child.
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }عوامل الربط
تصف عوامل الربط العلاقات بين العناصر: المسافة (عنصر سليل)، و> (عنصر ابن مباشر)، و+ (عنصر شقيق مجاور)، و~ (عنصر شقيق عام).
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */الخصوصية: من يفوز؟
عندما تستهدف عدة قواعد العنصر نفسه، تحدد الخصوصية القاعدة الفائزة. تتفوق محددات المعرّف (0,1,0,0) على محددات الصنف (0,0,1,0)، التي تتفوق بدورها على محددات النوع (0,0,0,1). وتتغلب الأنماط المضمّنة على جميعها. أما !important فيتغلب على كل شيء، فاستخدمه كحل أخير.
حساب الخصوصية
احسب المعرّفات والأصناف/السمات/الأصناف الزائفة والأنواع كلًّا على حدة. ثم قارن عمودًا بعمود. مثال: #nav .link:hover = (0,1,1,1). و.nav a = (0,0,1,1). يفوز المحدد الأول.
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }التتالي: الترتيب مهم
عندما تكون الخصوصية متساوية، تفوز القاعدة التي تظهر لاحقًا في ورقة الأنماط. وهذا هو الحرف C في CSS، أي التتالي. ويهم كلٌّ من ترتيب الاستيراد وترتيب المصدر.
التوريث
تُورث بعض خصائص CSS افتراضيًا، إذ تتلقى العناصر الأبناء قيمة العنصر الأب من دون ضبطها لها مباشرة. وتُورث الخصائص المتعلقة بالنص، مثل color وfont-family وline-height. أما خصائص نموذج الصندوق، مثل margin، فلا تُورث.
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}محددا :is() و:where()
يتيح لك :is() و:where() كتابة محددات موجزة تطابق أي عنصر من قائمة. والفرق بينهما أن :is() يرث أعلى درجة خصوصية من الوسائط التي يتلقاها، بينما تكون خصوصية :where() صفرًا دائمًا.
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}المحدد العام *
يطابق المحدد العام * كل عنصر. ويُستخدم عادةً في عمليات إعادة ضبط CSS: *, *::before, *::after { box-sizing: border-box; }، مما يجعل نموذج الصندوق أكثر قابلية للتنبؤ.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}الأنماط الافتراضية للمتصفح
تطبّق المتصفحات ورقة أنماطها الافتراضية الخاصة، وهي ورقة أنماط وكيل المستخدم، قبل ورقة الأنماط الخاصة بك. وتحيّد عمليات إعادة ضبط CSS، مثل normalize.css، أو طبقات CSS هذه القيم الافتراضية، لتبدأ عملية التنسيق من أساس معروف.
تحقق سريع
أي محدد يتمتع بأعلى درجة خصوصية؟
مراجعة: المحددات والتتالي
استهدف العناصر باستخدام محددات النوع والصنف والمعرّف والسمة والصنف الزائف. تحل الخصوصية التعارضات (المعرّفات > الأصناف > الأنواع). ويكسر التتالي التعادل باستخدام ترتيب المصدر. وينشر التوريث أنماط النص إلى العناصر السليلة تلقائيًا.
الأسئلة الشائعة
هل درس «المحددات والتتالي» مجاني؟
نعم — نص درس «المحددات والتتالي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «المحددات والتتالي»؟
حدّد العناصر باستخدام محددات النوع والصنف وID والسمات. افهم التخصيص والوراثة والتتالي لتتنبأ بالأنماط الفائزة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «المحددات والتتالي»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المحددات والتتالي
- الألوان والطباعة ونموذج الصندوق
- Display: أساسيات block وinline وflex وgrid
- تحديد الموضع: relative وabsolute وfixed وsticky