| المحدد | المعنى وطريقة الاستهداف | مثال واستخدام شائع |
|---|---|---|
| المحدد المجرّد attr | يستهدف أي عنصر يمتلك هذه السمة بغض النظر عن قيمتها | مثل استهداف جميع الصور التي تمتلك نصاً بديلاً alt لتنسيقها |
| المحدد المساوي attr=val | يستهدف العنصر الذي تساوي قيمة سمته الكلمة المحددة تماماً | مثل استهداف حقول الإدخال من نوع نص input type=text |
| محدد البداية attr^=val | يستهدف العنصر الذي تبدأ قيمة سمته بالكلمة المحددة | مثل تنسيق جميع الروابط الآمنة التي تبدأ ببروتوكول https |
| محدد النهاية attr$=val | يستهدف العنصر الذي تنتهي قيمة سمته بالكلمة المحددة | مثل تلوين روابط تحميل ملفات الـ PDF التي تنتهي بـ pdf |
| محدد الاحتواء العام attr*=val | يستهدف العنصر الذي تحتوي قيمة سمته على الكلمة المحددة في أي مكان بالداخل | مثل استهداف الروابط التي تحتوي على كلمة nouvil في مسارها |
| محدد الكلمة المنفصلة attr~=val | يستهدف العنصر الذي تحتوي قيمة سمته على الكلمة المحددة ككلمة مستقلة تفصلها مساحات | مثل استهداف عناصر تمتلك كلمات دلالية معينة في خانة البيانات |
| محدد القيمة أو اللاحقة attr|=val | يستهدف العنصر الذي تكون قيمته مساوية للكلمة تماماً أو تبدأ بها متبوعة بشرطة | مثل استهداف وتحديد لغات الموقع كالعربية التي تبدأ بـ ar-eg أو ar |
محددات الصفات تتيح استهداف العناصر بناءً على وجود سمة (attribute) أو قيمتها. هذا مفيد جداً للنماذج والروابط والمكونات الديناميكية.
**الصياغات الأساسية:**
| المحدد | المعنى | |---|---| | `[attr]` | عنصر له هذه السمة بأي قيمة | | `[attr="val"]` | قيمة السمة تساوي "val" تماماً | | `[attr^="val"]` | قيمة السمة تبدأ بـ "val" | | `[attr$="val"]` | قيمة السمة تنتهي بـ "val" | | `[attr*="val"]` | قيمة السمة تحتوي على "val" | | `[attr~="val"]` | قيمة السمة تحتوي كلمة "val" | | `[attr|="val"]` | القيمة تساوي "val" أو تبدأ بـ "val-" |
هذه المحددات تُجنّبك كتابة classes إضافية وتجعل الكود أكثر ارتباطاً بمعنى HTML.
| 1 | [type="submit"] { background: #10b981; } |
| 2 | a[href^="https"] { color: green; } |
| 3 | a[href$=".pdf"]::after { content: " (PDF)"; } |
| 4 | input[placeholder*="بحث"] { width: 240px; } |
مثال 1: تنسيق روابط حسب نوعها
| 1 | /* روابط خارجية */ |
| 2 | a[href^="http"]::after { |
| 3 | content: " ↗"; |
| 4 | font-size: 0.75em; |
| 5 | } |
| 6 | |
| 7 | /* روابط PDF */ |
| 8 | a[href$=".pdf"] { |
| 9 | color: #dc2626; |
| 10 | font-weight: bold; |
| 11 | } |
| 12 | |
| 13 | /* حقول النموذج المطلوبة */ |
| 14 | input[required] { |
| 15 | border-color: #f59e0b; |
| 16 | border-width: 2px; |
| 17 | } |
| 18 | |
| 19 | /* زر التقديم */ |
| 20 | button[type="submit"] { |
| 21 | background: #3b82f6; |
| 22 | color: white; |
| 23 | padding: 8px 20px; |
| 24 | border: none; |
| 25 | border-radius: 6px; |
| 26 | } |