Skip to content

محدِّدات CSS مشروحة

كل محدِّدات CSS الشائعة، مجمّعة حسب العائلة: الأساسية، والمُدمِجات، والفئات الزائفة، والعناصر الزائفة، ومحدِّدات السمات. كل صف يقرن المحدِّد بمثال من سطر واحد.

المحدِّد يختار العناصر التي تنطبق عليها القاعدة. التخصيص يحدّد أي قاعدة تفوز عندما تتطابق عدة قواعد: inline يتغلب على id، وid يتغلب على class، وclass يتغلب على type. اقرأ المحدِّدات من اليمين إلى اليسار: المتصفح يطابق الجزء الأيمن أولاً ثم يصعد عبر المُدمِجات. العائلات أدناه تغطي تقريبًا كل ما ستكتبه.

جدول مرجعي · 53 إدخالات
53 of 53 rows
أساسية
كل العناصر من هذا الوسم.button { }
العناصر التي تحمل هذه الفئة..active { }
العنصر الوحيد صاحب هذا المعرّف.#header { }
كل العناصر.* { box-sizing: border-box; }
جذر المستند؛ المكان المعتاد للخصائص المخصصة العامة.:root { --gap: 1rem; }
العناصر التي يطابقها A أو B (تجميع).h1, h2, h3 { }
المُدمِجات
أي B ينحدر من A.nav a { }
B يكون ابنًا مباشرًا لـ A.ul > li { }
B يأتي مباشرة بعد A، بنفس الأب.h1 + p { }
كل B يأتي بعد A، بنفس الأب.h1 ~ p { }
الفئات الزائفة (الحالة)
العنصر أثناء وجود المؤشر فوقه.a:hover { }
العنصر الذي يحمل تركيز لوحة المفاتيح.input:focus { }
عنصر يكون أول ابن لأبيه.li:first-child { }
الابن رقم n؛ يقبل صيغًا مثل 2n.tr:nth-child(2n) { }
العناصر التي لا تطابق أي محدِّد داخلي؛ يقبل قائمة منذ Selectors 4.li:not(:first-child, .skip) { }
مربع اختيار أو زر خيار أو خيار محدَّد.input:checked { }
حقل إدخال أو زر معطَّل.button:disabled { }
أب يحوي تطابقًا مع المحدِّد الداخلي.li:has(ul) { }
أي محدِّد في القائمة؛ التخصيص هو الأعلى في القائمة.:is(ol, ul) li { }
مثل :is()، لكن بتخصيص صفري.:where(ol, ul) li { }
تركيز ينبغي أن يُظهر حلقة، عادة من لوحة المفاتيح.a:focus-visible { }
عنصر يحمل التركيز بنفسه أو في أحد أحفاده.form:focus-within { }
عنصر يكون آخر ابن لأبيه.li:last-child { }
عنصر بلا أشقاء.p:only-child { }
الشقيق رقم n من نفس الوسم؛ يقبل صيغًا مثل 2n.p:nth-of-type(2n) { }
أول شقيق أو آخر شقيق من نفس الوسم.p:first-of-type { }
عنصر بلا أبناء وبلا نص.td:empty { }
الروابط غير المزارة والروابط المزارة سابقًا.a:visited { }
الحقول المعلَّمة كمطلوبة والحقول المتروكة كاختيارية.input:required { }
الحقول التي تجتاز قواعد التحقق الخاصة بها أو تفشل فيها.input:invalid { }
حقل لا يستطيع المستخدم تعديله.input:read-only { }
العنصر الذي يطابق معرّفه جزء الـ URL.#note:target { }
الخيار المحدَّد مسبقًا أو الزر الافتراضي في مجموعة.input:default { }
مربع اختيار وضعه سكربت في حالة غير محدَّدة.input:indeterminate { }
أي عنصر مدمج، أو عنصر مخصص بعد تسجيله.my-widget:defined { }
عنصر باللغة المحدَّدة.p:lang(fr) { }
العناصر الزائفة
عقدة محتوى مولَّدة قبل العنصر.label::before { content: ""; }
عقدة محتوى مولَّدة بعد العنصر.code::after { content: ";"; }
أول حرف من كتلة نص.p::first-letter { }
النص النائب لحقل إدخال.input::placeholder { }
أول سطر من كتلة نص.p::first-line { }
النص الذي أبرزه المستخدم.::selection { }
الرمز أو الرقم في عنصر قائمة.li::marker { }
المنطقة خلف عنصر بملء الشاشة أو مربع حوار.dialog::backdrop { }
زر الاستعراض داخل حقل ملف.input::file-selector-button { }
جزء Shadow DOM كشفه المضيف.my-widget::part(header) { }
محدِّدات السمات
عناصر تحمل السمة، بأي قيمة.[required] { }
السمة تساوي val تمامًا.[type="submit"] { }
السمة تبدأ بـ val.a[href^="https"] { }
السمة تنتهي بـ val.a[href$=".pdf"] { }
السمة تحتوي على val.a[href*="login"] { }
قائمة مفصولة بمسافات تتضمن val.[class~="badge"] { }
القيمة تساوي val أو تبدأ بـ val يتبعها شرطة.[lang|="en"] { }