آموزش انتخاب کننده های صفات Attribute Selectors در css

حامد محمدیحامد محمدی
100 بازدید
آموزش انتخاب کننده های صفات در css

انتخاب کننده های صفات یا 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 که شامل یک لیست از کلمات جدا از هم که یکی از آنها کلمه  “گل” باشد را،انتخاب می کند. و در نهایت یک مرز به ضخامت ۵px و به رنگ زرد در اطراف آن عنصر رسم می کند.

[php]

[title~=”flower”] {
border: ۵px 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]

  1. نتیجه را مشاهده کنید.

انتخاب کننده[صفت$=”مقدار”] در 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: ۱۵۰px;
display: block;
margin-bottom: ۱۰px;
background-color: yellow;
}

input[type=”button”] {
width: ۱۲۰px;
margin-left: ۳۵px;
display: block;
}

[/php]

نتیجه را مشاهده کنید.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

30+ محصولات
234+ سفارشات تکمیل شده
1701+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت