در css این امکان وجود داره که ما از طریق پراپرتی خاصی، بتوانیم attribute های فایل html رو انتخاب کرده و بهشون استایل بدیم. که در ادامه توضیحاتی ارائه شده است.
[attribute]
توی این پراپرتی می توانیم المان هایی را در html انتخاب کنیم که این اتری بیوت رو دارند، برای مثال کد زیر رو مشاهده کنید:
[type]{ /* <input type="text" placeholder="name & Family"> */
background-color: aqua;
}[attribute=type]
در این نوع سلکتور علاوه بر اینکه نوع اتری بیوت رو انتخاب می کنیم، تایپ و مقداری اون هم مشخص می کنیم، برای مثال اونایی که تایپ ایمیل دارن، یا تایپ پسورد دارند و…، مثال زیر رو ببینید:
.MyForms [type=text] { /* <input type="text" placeholder="name & Family"> */
background-color: aqua;
}
.MyForms [type=email] { /* <input type="email" placeholder="exp @ Gmail.com "> */
background-color: aqua;
}[attribute^=value]
اتری بیوت هایی رو انتخاب کن که اولش با مقدار مشخصی شروع شده باشه، برای مثال می خواهیم در صفحه وب لینک هایی که با https شروع شدند رو رنگ سبز و اونایی که با http شروع شدند رو با رنگ قرمز نشون بدیم. نمونه کد زیر رو مشاهده کنید:
a [href^="https://"]{
background-color: green;
}
a [href^="http://"]{
background-color: red;
}[attribute$=value]
اگر بخواهیم لینک هایی رو در سایت انتخاب کنیم که آخرشون ir باشه، چیکار باید بکنیم؟ اینجاست که این سلکتور به کار میاد. نمونه کد زیر رو ببینید:
a [href$=".ir"] , a [href$=".ir/"]{
background-color: green;
}
a [href$=".com"] , a [href$=".com/"]{
background-color: yellow;
}[attribute~=value]
شامل این ولیو و مقدار باشه، فرض کنیم بخواهیم تمامی تصاویر سایت رو انتخاب کنیم که توی اتری بیوت alt اون عکس کلمه مد نظر ما اومده باشه، فرقی نمیکنه، وسطش، آخرش یا اولش! نمونه کد زیر رو ببینید:
[title~="ایران"] {
border: 5px solid green;
}
OR
img [title~="ایران"] {
border: 5px solid green;
}سلکتورهای دیگری همچون [attribute|=value] – [attribute*=value] نیز وجود دارند که زیاد کاربردی نیستند و در نتیجه اینجا توضیح نمی دهیم، در صورت تمایل می توانید این لینک را مطالعه نمائید.