محدِّدات CSS الأقل شهرة ولكنها مفيدة
-
المحدِّد العام
*
يُستخدم لتنسيق جميع العناصر في الصفحة. غالبًا ما يُستخدم لإعادة تعيين الهوامش والحشوات وتعيين الخطوط الافتراضية.
* { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; }
-
محدِّد المجاور
+
يحدد العنصر الذي يلي عنصرًا آخر مباشرةً. على سبيل المثال، تنسيق أول عنصر
div
بعد الترويسة.header + div { margin-top: 50px; }
-
محدِّد الأبناء المباشرين
>
يحدد العناصر الفرعية المباشرة فقط. على سبيل المثال، تنسيق عنصر
em
الذي هو ابن مباشر لعنصرh1
.h1 > em { color: red; }
-
محدِّد السمة
[attribute*="value"]
يحدد العناصر التي تحتوي على قيمة معينة في سمة معينة. على سبيل المثال، تنسيق الروابط التي تحتوي على facebook في عنوانها.
a[href*="facebook"] { color: blue; }
-
محدِّد النفي
:not
يحدد العناصر التي لا تطابق محددًا معينًا. على سبيل المثال، تنسيق جميع عناصر
div
ما عدا تلك التي تحتوي على كلاسfooter
.div:not(.footer) { margin-bottom: 40px; }
-
محدِّد العنصر الأول والآخر
:first-child و :last-child
يحدد العنصر الأول أو الأخير من العناصر الفرعية. على سبيل المثال، إزالة الإطار من العنصر الأول وإزالة الهامش من العنصر الأخير في قائمة.
ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; }
-
محدِّد العنصر رقم n
:nth-child
يحدد العنصر الفرعي رقم
n
على سبيل المثال، تنسيق العنصر الثالث في قائمة.ul li:nth-child(3) { background: #ccc; }
-
محدِّد العنصر رقم n من النهاية
:nth-last-child
يحدد العنصر الفرعي رقم
n
بدءًا من النهاية. على سبيل المثال، تنسيق العنصر قبل الأخير في قائمة.ul li:nth-last-child(2) { background: #ccc; }
-
محدِّد العنصر رقم n من نوع معين
:nth-of-type
يحدد العنصر رقم
n
من نوع معين. على سبيل المثال، تنسيق الفقرة الثالثة داخلdiv
.div p:nth-of-type(3) { font-style: italic; }
-
محدِّد الروابط التي تمت زيارتها
:visited
يحدد الروابط التي تمت زيارتها مسبقًا. على سبيل المثال، تغيير لون الروابط التي تمت زيارتها إلى الأزرق.
a:visited { color: blue; }
هذه المحدِّدات يمكن أن توفر الكثير من الوقت وتجعل الشفرة أكثر أناقة وفعالية. هناك العديد من المحدِّدات الأخرى التي يمكن استكشافها لتحسين تجربة التصميم.