هر عنصر HTML می تواند یک یا چند Attribute یا ویژگی داشته باشد. هر ویژگی با یک نام و یک ارزش مشخص می شود. به عنوان مثال عنصر input زیر دارای ویژگی با نام type و ارزش یا مقدار text می باشد:
<input type="text">
یا در ادامه تگ html را مشاهده می کنید که ویژگی lang برای آن نوشته شده است:
<html lang="fa"></html>
همچنین در مطالب قبل با کلاسها و idها نیز آشنا شدیم, آنها هم ویژگی محسوب می شوند.
نحوه استفاده از ویژگی های HTML
در CSS امکان انتخاب عناصر از طریق این ویژگی ها وجود دارد. در ساده ترین حالت می توانیم بصورت زیر نام ویژگی را درون براکت قرار دهیم تا هر عنصری که دارای چنین ویژگی هست را هدف قرار دهیم:
[class] {
color: red;
}
هر عنصری که در صفحه ویژگی class را داشته باشد رنگ متن قرمز به عنوان استایل آن اعمال می شود.
حال اگر بخواهیم فقط عناصری که کلاس matarsak دارند را به این روش انتخاب کنیم خواهیم داشت:
[class="matarsak"] {
color: red;
}
و در نهایت اگر بخواهیم فقط پاراگراف هایی که این کلاس را دارند انتخاب کنیم, می نویسیم:
p[class="matarsak"] {
color: red;
}
توجه کنید که در اینجا فقط برای یادگیری این مثال زده شد و بهتر است از انتخابگر کلاس که همان استفاده از . است استفاده کنیم. چرا؟
انتخابگر کلاس از انتخابگر ویژگی سرعت اجرایی بالاتری دارد یعنی مرورگر برای انتخاب عناصر از طریق ویژگی ها باید زحمت بیشتری را متحمل شود.
اما گاهی انتخابگر ویژگی خیلی می تواند مفید باشد. مثلا می خواهیم تمام inputهایی که از نوع password هستند را انتخاب کنیم:
input[type="password"] {
border: 1px solid red;
}
حتما تا الان کاملا متوجه شدید که هر نوع ویژگی که بخواهید را می توانید از طریق این انتخابگر استفاده کنید حتی به عنوان نمونه ویژگی target:
a[target="_blank"] {
text-decoration: underline;
}
نکته ای که بهتر است در مورد این انتخابگر بدانید این است که ارجحیت انتخابگر ویژگی با انتخابگر کلاس برابر است.
استفاده از این نوع انتخابگر به همینجا ختم نمی شود. این امکان وجود دارد که بتوانیم با توجه به قسمتی از مقدار یک ویژگی عنصر, آن عنصر را انتخاب کنیم. مثلا تمام عناصری که ویژگی کلاس آنها شامل کلمه container می باشد, یا لینک هایی که آدرس آنها به com. ختم می شوند.
شروع با…
فرض کنید عناصر HTML بصورت زیر باشند: (به آدرس های لینک ها توجه کنید)
<article>
<p>
Lorem ipsum dolor sit amet. <a href="http://mojtabaseyedi.com">MA!</a>
ipsum dolor sit amet. <a href="internal.html">oona!</a>
</p>
</article>
چه می توان کرد اگر بخواهیم فقط لینک هایی که آدرس های آنها خارج از سایت خودمان هست را انتخاب کنیم؟ به بیان ساده تر آنهایی که با http:// شروع می شوند.
کافی است بصورت زیر از ^ استفاده کنیم:
a[href^="http://"] {
color: blue;
}
در اینجا ما عناصر a که ویژگی href آنها با مقدار http:// شروع می شود را انتخاب می کنیم.
اتمام با…
حال فرض کنید می خواهیم لینک هایی که در سایتمان به فایل های pdf اشاره می کنند را با استایلی متمایز نمایش دهیم. از آنجا که اطمینان داریم تمام این لینک ها با pdf. ختم می شوند کافی است تا از $ بصورت زیر استفاده کنیم:
a[href$=".pdf"] {
}
شامل…
اگر عناصر img را بصورت زیر داشته باشیم:
<img src="images/img1.jpg" alt="" >
<img src="images/img2_thumbnail.png" alt="" >
<img src="images/img3_thumbnail-test.png" alt="" >
<img src="images/img4_thumbnail.jpg" alt="" >
و بخواهیم آنهایی که در آدرس آنها کلمه thumbnail آمده است را انتخاب کنیم می توانیم از * بصورت زیر استفاده کنیم:
img[src*="thumbnail"] {
}
چندین مقدار
همانطور که یک عنصر می تواند چندین کلاس داشته باشد می تواند چندین مقدار ویژگی هم داشته باشد.
عنصری زیر دارای سه مقدار برای ویژگی rel است:
<h1 rel="friend borther classmate"></h1>
برای اینکه بخواهیم بواسطه یکی از این ویژگی ها این عنصر را انتخاب کنیم می توانیم بنویسیم:
h1[rel~="brother"] {
}
دارای خط تيره
اگر مقدار ویژگی دارای خط تيره بود و نیاز داشتیم تا بواسطه کلمه اول عنصر را انتخاب کنیم می توانیم از علامت پایپ | استفاده کنیم:
<html lang="fa-IR"></html>
html[lang|="fa"] {
}
عنصر بالا انتخاب می شود چون شروع آن با fa بود و بعد از آن هم یک خط تیره وجود داشت.
البته مثال های بالا را می توان به روش های دیگر هم پیاده سازی کرد. به عنوان مثال برای این مثال آخر می توان بصورت زیر عمل کرد:
html[lang^="fa-"] {
}
در آخر بهتر است بدانیم که می توانیم انتخابگرهای ویژگی را با هم ترکیب کنیم به عنوان مثال می توانیم بنوسیم:
img[src*="large"][alt~="bird"] {
}
همانطور که مشاهده می کنید می توانیم به آسانی با استفاده از تکه ای از مقدار ویژگی عناصر به عنوان قلاب برای گرفتن عناصر استفاده کنیم. آن تکه می تواند اول مقدار ویژگی, آخر آن و چه در هر کجای آن باشد.
بسیار عالی
خیلی خوب توضیح میدین
منتظر ادامه مطالبتون هستم
راستی چطوری میشه با شما تماس گرفت به صورت خصوصی؟ ایمیل یا آی دی تلگرام یا راه تماسی بگزارید لطفا. میخوام در موردی از شما مشورت بگیرم اگر امکانش هست
ممنون. از آدرس ایمیل سایت استفاده کنید.
یک ایمیل فرستادم خدمتتون
ممنون میشم با حوصله بخونید و جوابم رو بفرستید
واووو
خیلی جالب بود
مجتبی خان سایتت تکه تو کل سایتای CSS ایران
پاینده باشی و سازنده
[type=radio]:checked
یه همچین انتخابگرهایی همس هست که اشاره نشده ! اگه ممکنه توضیح بفرمایید که این دونقطه بعد از انتخابگر ویژگی و ارزش چه کاربردی داره
اشاره شده که! :)
http://css-tricks.ir/refere…
موفق باشید
برای دسترسی بهتر ویژگی ها و انتخابگرها به قسمت مرجع مراجعه کنید.
با سلام و عرض خسته نباشید .
میدونید که به روش های مختلفی میتونیم یک عنصر رو انتخاب کنیم ؛ آیا بعدها گفته میشه که کدام روش بهینه تر و اصولی تر هست ؟
چون اینجا فقط روش ها رو یاد میگیریم اما اینکه کی و کجا استفاده کنیم یکم مبهم باقی میمونه !
پی نوشت : من تازه با سایتتون آشنا شدم و با اینکه قبلا تا حدودی وب کار کردم اما از ابتدا آموزش هارو جلو میبرم و واقعا از صمیم قلب متشکرم بابت تهیه این مجموعه ی ارزشمند . توجه به جزئیات و ثابت کردن اهمیت اونها از نکاتیه که سایت شما رو متمایز میکنه از سایت های مشابه . به هر حال دم شما گرم .
سلام، ممنونم
این روش ها در “مقابل هم” وجود ندارند که با هم مقایسه بشند و در نهایت یک روش اصولی وجود داشته باشه، نه اینطور نیست.
این ها “در کنار هم” هستند که با هم قدرت ما رو برای کنترل رو عناصر صفحه به روش های مختلف زیاد میکنند. پس هرکدومشون به جای خودش کاربر اصولی خودش رو داره.
حلا از کجا بفهمیم کی از کدوم استفاده کنیم؟ تجربه و نگاه کردن به کدهای دیگران و مقاله خوندن این رو بوجود میاره به مرور زمان.
موفق باشید.
سلام
خب به جای این:
[class=”matarsak”]
}
color: red;
{
نمیتونیم از matarsak. استفاده کنیم؟؟
سلام
عالی
مرسی که هستی css-tricks.ir
فقط اون قسمت اتمام با…
به جای .pdf اشتباه تایپی وجود داره نوشته شده .paf
سلام، ممنونم :)
سلام انصافا به دور از اغراق سایتت بی نظیره؟اموزش جاوا اسکریپت رو هم بذاری دیگه تو دنیا تک میشه!!!!
جدا از اینکه ساییت واقعا مطالبش جون دارو بدرد بخوره مجتبی جان،این یکی خییییلی حالمو عوض کرد دمت گرم.
درود و خداقوت.
تفاوت =~ و =* چیه؟
فرض کنید در رشته زیر میخوایم دنبال کلمه brother باشیم:
friendbortherclassmate
انتخابگر =* توی کاراکتر به کاراکتر میگرده و اگر این کلمه رو یک جایی ببینه جواب مثبت میده، در نتیجه این انتخابگر میتونه این کلمه رو اونجا پیدا کنه.
ولی کار =~ این هستش که بین رشته هایی که با فاصله از هم جدا شدند کلمه brother رو پیدا کنه. یعنی در مثال بالا موفق نخواهد بود ولی در مثل های پایین جواب مثبت میده:
friend borther classmate
borther classmatefriend
friendclassmate borther
البته انتخابگر =* هم این در مثال های بالا جواب مثبت میده.
پس جایی از انتخابگر دوم استفاده میکنیم که میخوایم اون مقدار مورد نظرمون به صورت یک کلمه جداگانه باشه و داخل یک رشته از کاراکترها نباشه.
درود بر شما خدا قوت
واقعا بهترین سایت آموزش css به زبان فارسی هستید.
به امید آموزش های بیشتر
موفق باشید