آموزش CSS – سلکتور Attribute

در جلسه قبل از آموزش CSS با ویژگی opacity در CSS آشنا شدید. در این بخش قصد داریم شما را با سلکتور Attribute در CSS آشنا کنیم.

یک سلکتور Attribute المان HTMLی را انتخاب می کند که یک خصوصیت یا خصوصیتی با مقدار خاص را دارد.

درک سلکتور Attribute

سلکتور Attribute در CSS یک راه ساده و قدرتمند را برای لحاظ کردن استایل ها به المان HTML را می دهد.

شما می توانید یک سلکتور Attribute را با قرار دادن مشخصه در یک جفت براکت مربعی ایجاد کنید. همچنین میتوانید از سلکتورهای نوع المان هم قبل از آن استفاده کنید.

سلکتور [attribute] در CSS

این ساده ترین فرم از استفاده سلکتور Attribute برای لحاظ کردن استایل ها به المانی که مشخصه مورد نظر را دارد, است.

برای مثال, شما می توانید همه المان ها که خصوصیت title را دارند به اینصورت استایل دهی کنید.

[title] {
    color: blue;
}

[title] {

color: blue;

}

سلکتور [title] در مثال بالا همه المان ها که خصوصیت title را دارند انتخاب می کند.

همچنین می توانید انتخاب خود را به المان HTML که این نوع خصوصیت را دارد محدود کنید.

abbr[title] {
    color: red;
}

abbr[title] {

color: red;

}

سلکتور abbr[title] فقط المان های <abbr> که خصوصیت title را دارند انتخاب می کند.

سلکتور [attribute=”value”] در CSS

شما می توانید از اپراتور = برای سلکتور attribute به منظور انتخاب المان هایی که مقدار خصوصیت آنها دقیقا مساوی با مقدار داده شده است, استفاده کنید:

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

input[type="submit"] {

border: 1px solid green;

}

این سلکتور همه <input> ها که مقدار type آنها برابر submit است را انتخاب می کند.

سلکتور [attribute~=”value”] در CSS

شما می توانید از اپراتور ~= برای ساختن یک سلکتور attribute که هر نوع المانی که مقدار خصوصیت آن یک لیست جدا شونده با فاصله دارد (مثل class=”alert warning”) استفاده کنید که دقیقا همان مقدار مشخص شده را دارند.

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

[class~="warning"] {

color: #fff;

background: red;

}

این سلکتور هر نوع المان HTML که یک خصوصیت class به همراه مقادیر که با فاصله جدا شدند و یکی از آنها warning باشد را انتخاب می کند.

برای مثال این المان می تواند شامل مقادیر کلاس مثل warning یا alert warning info و .. باشد.

سلکتور [attribute|=”value”] در CSS

شما می توانید از اپراتور |= برای ساخت سلکتور attribute که هر نوع المان مقدار خصوصیت آن یک لیست جدا شوند با – دارند و مقدار مشخص شده نیز در اول باشد, استفاده کنید.

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

[lang|=en] {

color: #fff;

background: blue;

}

سلکتور استفاده شده در مثال بالا همه المان ها که خصوصیت lang آنها شامل مقدار شروع شونده en باشد و همچنین می تواند بعد آن یک – و بعد آن کاراکترهای دیگر باشد, انتخاب می کند.

این دستور المان هایی با خصوصیت lang و مقدار en , en-US, en-GB را انتخاب می کند و مقادیر US-en, GB-en نادیده گرفته می شوند.

سلکتور [attribute^=”value”] در CSS

شما می توانید از اپراتور ^= برای ساخت سلکتور attribute که هر نوع المان مقدار خصوصیت آن با مقدار مشخص شده شروع شده باشد استفاده کنید. و اهمیت ندارد که بعد آن کاراکتری باشد یا نه.

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

a[href^="http://"] {

background: url("external.png") 100% 50% no-repeat;

padding-right: 15px;

}

این سلکتور در مثال بالا به همه لینک های خارجی یک آیکون اضافه می کند.

سلکتور [attribute$=”value”] در CSS

مشابه سلکتور بالا, شما می توانید از اپراتور $= برای ساخت سلکتور attribute که هر نوع المان مقدار خصوصیت آن با مقدار مشخص شده به اتمام می رسد استفاده کنید.

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

a[href$=".pdf"] {

background: url("pdf.png") 0 50% no-repeat;

padding-left: 20px;

}

در مثال بالا همه المان های <a> که یک لینک به سند PDF دارند را انتخاب و یک آیکون را به آن اضافه می کند.

سلکتور [attribute*=”value”] در CSS

شما می توانید از اپراتور *= برای انتخاب همه المان هایی که خصوصیت مشخصی را بدون توجه به اینکه اول و یا آخر آن کاراکتری وجود دارد یا خیر و یا اینکه تنها مقدار خصوصیت باشد یا نه, استفاده کنید.

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

[class*="warning"] {

color: #fff;

background: red;

}

این سلکتور attribute در مثال بالا همه المان های html که خصوصیت شامل warning را دارند انتخاب می کند.

برای مثال همه المان ها که مقدار کلاس warning, alert warning, alert-warning یا alert_warning را انتخاب می کند

استایل دهی فرم ها با سلکتور attribute در css

سلکتورهای attribute برای استایل دهی فرم ها بدون کلاس یا id بسیار مفید هستند.

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;
}

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;

}

امیدوارم در این بخش آموزش CSS, از سلکتور Attribute در CSS نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش CSS – سلکتور Attribute

درک سلکتور Attribute

سلکتور [attribute] در CSS

سلکتور [attribute=”value”] در CSS

سلکتور [attribute~=”value”] در CSS

سلکتور [attribute|=”value”] در CSS

سلکتور [attribute^=”value”] در CSS

سلکتور [attribute$=”value”] در CSS

سلکتور [attribute*=”value”] در CSS

استایل دهی فرم ها با سلکتور attribute در css

کتاب آموزش CSS به فارسی

آموزش مدیا کوئری در CSS3

آموزش CSS – بخش آخر (متفرقه)

آموزش فیلترها در CSS3 – بخش اول

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه