جاري التحميل...
دليل كامل لمحددات CSS
يقدّم هذا الدليل الشامل لمحددات CSS مرجعًا كاملاً لجميع محددات CSS، مصممًا لمساعدة المطورين على كتابة وتصميم صفحات ويب دقيقة ومنظمة. يتيح الدليل استخدام كل محدد بشكل صحيح مع توفير الصياغة الدقيقة، الأمثلة العملية، ودعم المتصفحات لكل محدد. يغطي الدليل جميع الفئات: المحددات الأساسية، المحددات التركيبية، محددات السمات، الفئات الكاذبة (Pseudo-classes) الهيكلية، فئات تفاعل المستخدم، حالات النماذج، حالات الروابط، الفئات المنطقية، العناصر الكاذبة (Pseudo-elements)، المحددات المتقدمة، واستعلامات الوسائط (Media Queries). يمكن للمطورين الاعتماد عليه كمرجع سريع وسهل للوصول إلى جميع محددات CSS واستخدامها بكفاءة في مشاريعهم.
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | المحدد الشامل - يختار كل العناصر | * { margin: 0; } | جميع المتصفحات |
| element | tagname | محدد النوع - يختار كل العناصر من النوع المحدد | p { color: blue; } | جميع المتصفحات |
| .class | .classname | محدد الفئة - يختار العناصر التي تحمل الفئة المحددة | .highlight { background: yellow; } | جميع المتصفحات |
| \#id | #idname | محدد المعرف - يختار العنصر ذو المعرف المحدد | #header { width: 100%; } | جميع المتصفحات |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | محدد التابع - يختار B داخل A | div p { margin: 10px; } | جميع المتصفحات |
| child | A > B | محدد الابن - يختار B الابن المباشر لـ A | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | محدد الأخ المجاور - يختار B الذي يلي مباشرة A | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | محدد الأخ العام - يختار كل B الذين يأتون بعد A | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | يختار العناصر التي تحتوي على السمة المحددة | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | يختار العناصر التي تساوي السمة فيها القيمة المحددة | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | يختار العناصر التي تحتوي سمة فيها على الكلمة المحددة | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | يختار العناصر التي تبدأ السمة فيها بالقيمة | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | يختار العناصر التي تنتهي السمة فيها بالقيمة | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | يختار العناصر التي تحتوي السمة فيها على القيمة في أي مكان | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | مطابقة السمة بدون حساسية للحروف | \[type="EMAIL" i] { text-transform: lowercase; } | المتصفحات الحديثة |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | يختار العنصر الأول ضمن الأب | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | يختار العنصر الأخير ضمن الأب | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | يختار العنصر nth ضمن الأب | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | يختار العنصر nth من النهاية | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | يختار العنصر nth من نوعه | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | يختار العنصر nth من نوعه من النهاية | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | يختار أول عنصر من نوعه | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | يختار آخر عنصر من نوعه | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | يختار العنصر الوحيد ضمن الأب | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | يختار العنصر الوحيد من نوعه | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | يختار العناصر الخالية من الأطفال | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | يختار العنصر عند مرور الفأرة عليه | a:hover { color: red; } | جميع المتصفحات |
| :active | :active | يختار العنصر عند النقر أو التنشيط | button:active { transform: scale(0.95); } | جميع المتصفحات |
| :focus | :focus | يختار العنصر عند حصوله على التركيز من لوحة المفاتيح | input:focus { outline: 2px solid blue; } | جميع المتصفحات |
| :focus-visible | :focus-visible | يختار العنصر عند التركيز المرئي | button:focus-visible { outline: 2px solid; } | المتصفحات الحديثة |
| :focus-within | :focus-within | يختار العنصر الذي يحتوي على عنصر مركز | form:focus-within { border: 1px solid blue; } | المتصفحات الحديثة |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | يختار العناصر النشطة في النماذج | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | يختار العناصر المعطلة | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | يختار العناصر المحددة من نوع checkbox أو radio | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | يختار العناصر غير المحددة بشكل واضح | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | يختار العناصر الصحيحة من النموذج | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | يختار العناصر غير الصحيحة من النموذج | input:invalid { border-color: red; } | IE10+ |
| :required | :required | يختار الحقول المطلوبة | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | يختار الحقول الاختيارية | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | يختار الحقول للقراءة فقط | input:read-only { background: #f9f9f9; } | المتصفحات الحديثة |
| :read-write | :read-write | يختار الحقول القابلة للتحرير | input:read-write { background: white; } | المتصفحات الحديثة |
| :placeholder-shown | :placeholder-shown | يختار العناصر التي تعرض نص placeholder | input:placeholder-shown { font-style: italic; } | المتصفحات الحديثة |
| :in-range | :in-range | يختار القيم ضمن النطاق | input:in-range { border-color: green; } | المتصفحات الحديثة |
| :out-of-range | :out-of-range | يختار القيم خارج النطاق | input:out-of-range { border-color: red; } | المتصفحات الحديثة |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | يختار الروابط غير المزارة | a:link { color: blue; } | جميع المتصفحات |
| :visited | :visited | يختار الروابط المزارة | a:visited { color: purple; } | جميع المتصفحات |
| :any-link | :any-link | يختار كل الروابط (مزارة وغير مزارة) | a:any-link { text-decoration: underline; } | المتصفحات الحديثة |
| :target | :target | يختار العنصر المستهدف في URL الحالي | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | يختار العناصر التي لا تطابق المحدد | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | يختار العناصر التي تطابق أي محدد | :is(h1, h2, h3) { margin-top: 0; } | المتصفحات الحديثة |
| :where(selector) | :where(sel1, sel2) | مماثل لـ :is ولكن بلا تحديد للخصوصية | :where(h1, h2) { color: blue; } | المتصفحات الحديثة |
| :has(selector) | :has(sel) | يختار العناصر التي تحتوي محدد معين | div:has(img) { border: 1px solid; } | المتصفحات الحديثة |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | يضيف محتوى قبل العنصر | p::before { content: "→ "; } | IE9+ (single colon IE8+) |
| ::after | ::after | يضيف محتوى بعد العنصر | p::after { content: " ←"; } | IE9+ (single colon IE8+) |
| ::first-line | ::first-line | يختار أول سطر من النص | p::first-line { font-weight: bold; } | IE9+ (single colon IE6+) |
| ::first-letter | ::first-letter | يختار أول حرف من النص | p::first-letter { font-size: 2em; } | IE9+ (single colon IE6+) |
| ::selection | ::selection | يختار النص المحدد من قبل المستخدم | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | يختار نص placeholder | input::placeholder { color: #999; } | المتصفحات الحديثة |
| ::backdrop | ::backdrop | يختار خلفية العنصر عند العرض الكامل | dialog::backdrop { background: rgba(0,0,0,0.5); } | المتصفحات الحديثة |
| ::marker | ::marker | يختار علامات عناصر القائمة | li::marker { color: red; } | المتصفحات الحديثة |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | يختار جذر المستند | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | يختار عنصر النطاق | :scope > p { margin: 0; } | المتصفحات الحديثة |
| :defined | :defined | يختار العناصر المخصصة المعرفة | custom-element:defined { opacity: 1; } | المتصفحات الحديثة |
| :host | :host | يختار مضيف الظل | :host { display: block; } | المتصفحات الحديثة |
| :host(selector) | :host(sel) | يختار مضيف الظل المطابق للمحدد | :host(.active) { color: red; } | المتصفحات الحديثة |
| :host-context(selector) | :host-context(sel) | يختار المضيف في سياق محدد | :host-context(.dark) { color: white; } | المتصفحات الحديثة |
| ::slotted(selector) | ::slotted(sel) | يختار المحتوى المزروع | ::slotted(p) { margin: 0; } | المتصفحات الحديثة |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | يطبق الأنماط بناءً على شروط الوسائط | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | يطبق الأنماط إذا دعم المتصفح الخاصية | @supports (display: grid) { .layout { display: grid; } } | المتصفحات الحديثة |
| @container | @container (condition) | يطبق الأنماط بناءً على حجم الحاوية | @container (min-width: 400px) { .card { flex-direction: row; } } | المتصفحات الحديثة |
Quick Examples
css
CSS Code
/* Basic selectors combination */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Attribute selectors for forms */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-elements for enhanced styling */
.quote::before {
content: "«";
font-size: 2em;
color: #999;
}
/* Advanced structural selectors */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Modern logical selectors */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}
---- استخدم محددات دقيقة لتجنب تأثير الأنماط غير المقصودة
- فضل محددات الفئة (class) على المعرف (ID) لإعادة الاستخدام
- دمج المحددات بشكل فعال لتقليل حجم ملف CSS
- اختبر الفئات الكاذبة عبر المتصفحات المختلفة
- استخدم :not() بحذر لأنه قد يؤثر على الأداء
- تذكر أن العناصر الكاذبة تنشئ عناصر افتراضية في DOM
- ضع في اعتبارك أولوية التحديد عند استخدام تركيبات معقدة
- استخدم محددات السمات لتنسيق النماذج الديناميكي
- اختبر المحددات الحديثة مثل :has() و:is() لدعم المتصفحات
- اجمع المحددات ذات الصلة لتحسين تنظيم الكود
- استخدم المحددات التابعة بحكمة لتجنب التداخل المفرط
- تذكر أن بعض الفئات الكاذبة تعمل فقط مع عناصر معينة
🧠 اختبر معرفتك
جاهز للبدء
Reference Knowledge Check
اختبر معرفتك بمحددات CSS واستخدامها
3
الأسئلة
70%
للنجاح
∞
الوقت
∞
المحاولات
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى