انتخابگرهای صفات Attribute Selectors
خوش اومدین به شانزدهمین جلسه از دوره آموزش رایگان css. قرار هست که با انتخابگرهای صفات Attribute Selectors آشنا بشیم. ما در جلسه اول و در بخش انواع slelectorها در CSS با چند گروه از این انتخابگرها آشنا شدیم. امروز قصد داریم با یه گروه جدیدی از انتخابگرها به نام انتخابگرهای صفات آشنا بشیم. همونطور که از اسم این selectorها مشخص است، آنها مربوط به attributeها هستند. پس برای یادگیری این انتخابگر با من همراه باشید.
استفاده از نام attribute برای یک تگ
تا اینجا از انتخابگرهایی مثل classها و idها و تگ ها استفاده کردیم. همینطور با یه نوع انتخابگر بنام سودو آشنا شدیم. امروز با یه نوع دیگه از انتخابگرها میخایم کار کنیم که انتخابگرهای صفات نام دارن. با استفاده از انتخابگرهای صفات، ما قادر هستیم برای تگ هایی که یک attribute مشخصی رو دارند و یا یک attribute مشخص آنها حاوی مقدار خاصی هست، استایل دهی کنیم. مثلا میتونیم برای تگ های a که از attribute خاصی مثل target استفاده کردند، استایل مشخصی رو قرار بدیم. یا اینکه اگر مقدار target یک تگ a برابر با _blank بود، استایل خاصی رو براش درنظر بگیریم. به نمونه زیر توجه کنید:
a[target] {
background-color: yellow;
}
در کد بالا گفتم تگ a که حاوی صفت target هست، پس زمینه زرد داشته باشه.
استایل دهی زمانی که مقدار attribute دقیقا برابر با مقدار مشخصی است
a[target="_blank"] {
background-color: yellow;
}
در کد بالا هم شرطی رو برای استایل دهی قرار دادم. گفتم این استایل رو برای تگ های a قرار بده به شرط اینکه مقدار target اونها برابر با blank_ باشه. به این ترتیب و با استفاده از شرطی که قرار دادم، این استایل صرفا برای تگ های a که این شرط رو داشته باشن اعمال میشه.
در اینجا فقط و فقط زمانی استایل دهی انجام میشه که مقدار value دقیقا برابر با مقدار ما باشه نه یک کاراکتر کمتر و نه یک کاراکتر بیشتر.
استایل دهی زمانی که مقدار attribute حاوی کلمه مشخصی
مثال زیر رو ببینید:
[title~=flower] {
border: 5px solid yellow;
}
من در کد بالا گفتم که هر تگی که مقدار صفت title اون حاوی کلمه flower هست رو استایل دهی کن. نکته مهم اینه که مثل نوع قبلی لازم نیست که حتما دقیقا مقدار برابر با flower باشه بلکه کافیه که این کلمه در مقدار باشه. (البته درنظر داشته باشید که یه کلمه باید با فاصله جدا شده باشه). به این ترتیب اگه مثلا یه تگ img داشته باشم که مقدار صفت title اون برابر باشه با “rose flower” باز هم این استایل بهش تعلق میگیره چونکه حاوی کلمه flower هست. این درحالیه که اگه مقدار صفت title اون برابر بود با “roseflower” دیگه این استایل بهش نسبت داده نمیشد. چونکه دیگه کلمه flower در اون نبود(نکته مهم وجود فاصله است که کلمه رو مشخص میکنه)
پس ما با استفاده از عبارت =~ تونستیم به تگ هایی که مقدار صفات اونها حاوی عبارت خاصی هستن استایل دهی کنیم.
استایل دهی زمانی که مقدار attribute با مقدار خاص مدنظر ما شروع شده و بعد از خط تیره ادامه دارد
[class|="top"] {
background: yellow;
}
در کد بالا گفتم هر تگی که دارای کلاسی است که با عبارت -top شروع میشه رو استایل دهی کن و پس زمینه زرد بهش بده. مثلا کلاس های top-header و top-text که با -top شروع شدند مورد قبول هستند و استایل دهی میشن ولی کلاسی مثل topcontent با اینکه عبارت top در ابتدای اون هست ولی چون باخط تیره از بخش بعدی جدا نشده، استایل دهی نمیشه.
بنابراین من با استفاده از عبارت =| تونستم به تگ هایی که مقدار صفات اونها با عبارت بعد از = شروع میشن و بعد از اون مقدار خط تیره دارند رو استایل دهی کنیم.
استایل دهی زمانی که مقدار attribute با مقدار خاصی شروع میشه
[class^="top"] {
background: yellow;
}
در کدبالا گفتم هر تگی که دارای کلاسی است که با عبارتtop شروع شده رو استایل دهی کن. دیگه ضروری نیست که top با فاصله یا خط تیره جدا شده باشه یا نه همینکه در ابتدای اسم کلاس قرارداشته باشه این مقداردهی بهش تعلق میگیره.
پس ما با استفاده از عبارت =^ میتونیم به تگ هایی که مقدار صفات اونها با عبارت مدنظر ما شروع میشن استایل دهی کنیم.
استایل دهی زمانی که مقدار attibute با مقدار خاصی تمام میشه
[class$="test"] {
background: yellow;
}
در کد بالا گفتم هر تگی که دارای کلاسی است که با عبارت test تموم شده رو استایل دهی کن. این حالت دقیقا برعکس حالت قبلی هست اونجا بررسی میکرد که کلاس ما با عبارت مدنظرمون شروع بشه ولی اینجا بررسی میکنه که کلاسمون با عبارت مدنظرمون ما تموم بشه.
پس ما با استفاده از عبارت =$ میتونیم به تگ هایی که مقدار صفات اونها با عبارت مدنظر ما تموم میشن استایل دهی کنیم.
استایل دهی زمانی که مقدار attribute حاوی کاراکترهای خاصی باشه
[class*="te"] {
background: yellow;
}
در کد بالا گفتم که هر تگی که کلاسی داره که حروف te داخل اسم کلاسش هست، استایل دهی بشه. هیچ ضرورتی نداره که مقداری که وارد میکنیم یه کلمه باشه که با فاصله یا خط تیره جدا شده باشه همینکه این ترکیب کاراکترها در مقدار صفت باشه کافیه.
بنابراین با استفاده از عبارت =* میتونیم به تگ هایی که مقدار صفات اونها حاوی کاراکترهای خاصی هستند استایل دهی کنیم.
