محددات الخصائص في CSS

تضيف اختصاصات الخصائص نماذج النمط على عناصر HTML المحتوية على الخاصية المحددة. يمكن تعديل العناصر التي تحتوي على الخاصية المحددة فقط، وليس قيودًا على الخاصية class أو id.

تعرف على اختصاصات الخصائص

تقدم اختصاصات الخصائص في CSS طريقة بسيطة وقوية لتحديد النمط بناءً على الخاصيةالخصائص أو قيم الخاصيةوجودها سيدخل النمط على عناصر HTML.

يمكنك إنشاء اختصاصات الخصائص عن طريق وضع الخاصية (اختياريًا مع القيمة) بين علامتي التكويم المزدوج. يمكنك أيضًا وضعها قبل ذلكمختصرات أنواع العناصر。

تشرح الفقرات التالية الأكثر شيوعًا من اختصاصات الخصائص.

مختصرات CSS [attribute]

هذا أقل شكل ممكن من اختصاصات الخصائص، إذا كانت الخاصية المحددة موجودة، يتم تطبيق قاعدة النمط على العنصر. على سبيل المثال، يمكننا استخدام النمط التالي لتعديل جميع العناصر التي تحتوي على الخاصية title:

[title]　{
　　　　color: blue;
}

المصفف [title] في المثال السابق يتطابق مع جميع العناصر التي تحتوي على خاصية العنوان.

يمكنك أيضًا تقييد نطاق اختيار الخاصية عن طريق وضع خاصية اختيار العنصر بعد اختيار نوع العنصر، مثلما هو موضح في المثال التالي:

abbr[title] {
　　　　color: red;
}

المصفف abbr[title] فقط يتطابق معالعناصر التي تحتوي على خاصية العنوان، لذا تتطابق مع التقليل، ولكن لا تتطابق مع العناصر التي تحتوي على خاصيةالشريطعنصر العنوان

مصفف CSS [attribute="value"]

يمكنك استخدام عميل = لجعل اختيار الخاصية يتطابق مع أي عنصر يمتلك الخاصية ويكون قيمته تساوي القيمة المحددة:

input[type="submit"]　{
　　　　border: 1px solid green;
}

يطابق المصفف في المثال السابق العناصر التي تحتوي على input سيطابق هذا المصفف جميع العناصر التي تحتوي على خاصية type، قيمة الخاصية تساوي submit.

مصفف CSS [attribute〜="value"]

يمكنك استخدام عميل ~= لجعل اختيار الخاصية يتطابق مع الخاصية تحتوي على قيمة تتكون منهامفصولة بالفضاءتطابق أي عنصر في قائمة القيم (مثل class="alert warning")، واحدة من القيم تساوي القيمة المحددة:

[class~="warning"] {
　　　　color:　#fff;
　　　　background:　red;
}

سيطابق هذا المصفف أي عنصر يحتوي على خاصية class، تحتوي الخاصية على قيم مفصولة بالفضاء، واحدة منها هي warning. على سبيل المثال، العناصر التي تحتوي على قيمة فئة تطابق warning، alert warning، وما إلى ذلك.

مصفف CSS [attribute |="value"]

يمكنك استخدام عميل |= لجعل اختيار الخاصية يتطابق مع الخاصية تحتوي على بداية بالقيمة المحددةمفصولة بالشرطةتطابق أي عنصر في قائمة القيم:

[lang|=en] {
　　　　color:　#fff;
　　　　background: blue;
}

يطابق المصفف في المثال السابق العناصر التي تحتوي علىlangجميع العناصر التي تحتوي على الخاصية وتحتوي القيمة على بداية en، بغض النظر عن ما إذا كانت القيمة تحتوي على شرطة وأكثر من ذلك. على سبيل المثال، تطابق العناصر التي تحتوي على خاصية lang وقيمة en، en-US، en-GB، وما إلى ذلك، وليس US-en، GB-en.

مصفف CSS [attribute ^="value"]

يمكنك استخدام عميل ^= لجعل اختيار الخاصية يتطابق مع قيمة الخاصيةبالقيمة المحددةبدايةيمكن أن تتطابق أي عنصر. لا يجب أن يكون كلمة كاملة.

a[href^="http://"] {
　　　　background: url("external.png") 100% 50% no-repeat;
　　　　padding-right: 15px;
}

الاختيار المقدم في المثال السابق يحدد جميع الروابط الخارجية ويضيف أيقونة صغيرة تشير إلى أنها ستفتح في علامة تبويب جديدة أو نافذة جديدة.

مختار الخصائص [attribute $="value"] في CSS

بالمثل، يمكنك استخدام عملاق $= لاختيار الخاصية التي تحتوي على قيمة معينةبالقيمة المحددةمكتملة بالجميع العناصر. لا يجب أن يكون ذلك كلمة كاملة.

a[href$=".pdf"]　{
　　　　background:　url("pdf.png")　0　50%　no-repeat;
　　　　padding-left:　20px;
}

في المثال السابق، سيقوم هذا المختار بتطابقالروابط إلى ملفات PDF عبر جميع العناصر، وأضف أيقونة PDF صغيرة لتقديم تلميحات للمستخدم حول الرابط.

مختار الخصائص [attribute *="value"] في CSS

يمكنك استخدام عملاق *= لجعل مختار الخصائص يتطابق مع جميع العناصر التي تحتوي على قيمة خاصية تحتوي على القيمة المحددة.

[class*="warning"]　{
　　　　color:　#fff;
　　　　background:　red;
}

في المثال السابق، سيقوم هذا المختار بتطابق جميع العناصر HTML مع الخصائص التي تحتوي على قيمة classvalue. على سبيل المثال، العناصر التي تتطابق مع القيمة classvalue مثل warning، alert warning، alert-warning أو alert_warning وما إلى ذلك

استخدام مختار الخصائص لتشكيل نماذج

مختار الخصائص للعناصر التي لا تحتويفئةالاستخدام الخاص بالنمط النمط النمط خاص جدًا مفيدمعرف：

input[type="text"],　input[type="password"]　{
　　　　width:　150px;
　　　　display:　block;
　　　　margin-bottom:　10px;
　　　　background:　yellow;
}
input[type="submit"]　{
　　　　padding:　2px　10px;
　　　　border:　1px　solid　#804040;
　　　　background:　#ff8040;
}