پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
انتخاب کننده های صفات یا Attribute Selectors، دسته ای از انتخاب گرها هستند که برای استایل دادن به صفات HTML به کار برده می شوند.
انتخاب کننده های صفات به شما این امکان را می دهند تا بتوانید با اشاره به خصوصیت عناصر، برای آنها استایل تعریف کنید.
شاید این مبحث ،کمی پیچیده به نظر برسد! اما نگران نباشید.
در ادامه آموزش امروز همراه ما باشید، تا با هم کدها و مثال ها را مرور کنیم.
انتخاب کننده های صفات یا Attribute Selectors، دسته ای از انتخاب گرها هستند که برای استایل دادن به صفات HTML به کار برده می شوند.
انتخاب کننده های صفات به شما این امکان را می دهند تا بتوانید با اشاره به خصوصیت عناصر، برای آنها استایل تعریف کنید.
استایل دهی به عناصر HTML با ویژگی های خاص
این امکان وجود دارد که عناصر HTML که دارای ویژگی های خاص یا صفات مقداری هستند را، استایل دهی کرد.
انتخاب کننده [صفت] در CSS
انتخاب کننده [صفت] ، برای انتخاب کردن عناصری، با ویژگی های خاص استفاه می شود.
در مثال زیر، ما میخواهیم تمام عناصر <A> که ویژگی مورد نظر ما را دارند، انتخاب کنیم. و یک پس زمینه زردرنگ به آنها اضافه کنیم.
به کد زیر دقت کنید:
[PHP]
a[target] {
background-color: yellow;
}
[/PHP]
انتخاب کننده [صفت= “مقدار”] در CSS
انتخاب کننده [صفت] ، برای انتخاب کردن عناصری، با ویژگی های خاص و مقدار خاص استفاه می شود.
در مثال زیر، ما میخواهیم تمام عناصر <A> که آدرسی برابر با مقدار Blank_ را دارند، انتخاب کنیم. و یک پس زمینه زردرنگ به آنها اضافه کنیم.
به کد زیر دقت کنید.
[php]
a[target=”_blank”] {
background-color: yellow;
}
[/php]
انتخاب کننده [صفت~=”مقدار”] در css
انتخاب کننده [صفت~=”مقدار”] برای انتخاب کردن عناصری با مقدار صفت مشخص که حاوی یک کلمه مشخص باشد، استفاده می شود.
مثال زیر، تمامی عناصر دارای صفت title که شامل یک لیست از کلمات جدا از هم که یکی از آنها کلمه “گل” باشد را،انتخاب می کند. و در نهایت یک مرز به ضخامت 5px و به رنگ زرد در اطراف آن عنصر رسم می کند.
[php]
[title~=”flower”] {
border: 5px solid yellow;
}
[/php]
دقت داشته باشید
مثال بالا، عناصری که صفت title در آنها دارای مقادیر “flower”,summer flower”, “flower new” باشد را مطابقت خواهد داد، اما عناصری که صفت title در آنها برابر با مقادیر “my-flower” ,”flowers”باشد را نمایش نخواهد داد.
انتخاب کننده [صفت|=”مقدار”] در css
انتخاب کننده [صفت|=”مقدار”] برای انتخاب کردن عناصری با ویژگی مشخص، که با مقدار مشخص شده ای شروع می شوند، استفاده می شود.
مثال زیر، تمام عناصری که با یک کلاس ویژگی که با کلمه “top” شروع می شوند را انتخاب می کند. و در نهایت یک پس زمینه زرد رنگ به آنها اضافه میکند.
نکته!
دقت داشته باشید که مقدار باید، یا کلمه به کلمه باشد، یا به تنهایی وارد شود. مانند “class=”top, یا به دنبال آن یک ( – ) آورده شود. مانند “class=”top-text
[php]
[class|=”top”] {
background: yellow;
}
[/php]
انتخاب کننده [صفت^=”مقدار”] در css
[“attribute^=”value]
انتخاب کننده [صفت^=”مقدار”] برای انتخاب کردن عناصری استفاده می شود که ویژگی صفت آنها با یک مقدار مشخص شروع می شود.
مثال زیر تمام عناصری که ویژگی صفت آنها با کلمه “top” شروع می شود را انتخاب می کند.
نکته! مقدار صفت، لازم نیست که کلمه ای باشد.
[php]
[class^=”top”] {
background: yellow;
}
[/php]
انتخاب کننده[صفت$=”مقدار”] در css
[attribute$=”value”]
از انتخاب کننده [صفت$=”مقدار”] برای انتخاب کردن عناصری که ویژگی صفت آنها با یک مقدار مشخص شده پایان می یابد.
مثال زیر، تمام عناصری را که با ویژگی صفت آنها با مقدار (کلمه) “test” پایان می یابد انتخاب می کند.و یک پس زمینه زرد رنگ به آن اضافه می کند.
[php]
[class$=”test”] {
background: yellow;
}
[/php]
انتخاب کننده[صفت*=”مقدار”] در css
[attribute*=”value”]
از این انتخاب کننده برای انتخاب کردن عناصری استفاده می شود که ویژگی صفت آنها حاوی یک مقدار مشخص باشد.
مثال زیر تمام عناصری را که ویژگی صفت آنها با مقدار کلاس که شامل “te” می باشد انتخاب می کند.
[php]
[class*=”te”] {
background: yellow;
}
[/php]
نتیجه را مشاهده کنید.
فرم های استایل دهی شده
انتخاب کننده های صفت ، میتوانند در طراحی فرم ها و استایل دهی آنها مفیدباشند.
به مثال زیر و عملکرد آن دقت کنید.
[php]
input[type=”text”] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=”button”] {
width: 120px;
margin-left: 35px;
display: block;
}
[/php]
