هر عنصر 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 اشاره می کنند را با استایلی متمایز نمایش دهیم. از آنجا که اطمینان داریم تمام این لینک ها با paf. ختم می شوند کافی است تا از $ بصورت زیر استفاده کنیم:
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"] {
}
همانطور که مشاهده می کنید می توانیم به آسانی با استفاده از تکه ای از مقدار ویژگی عناصر به عنوان قلاب برای گرفتن عناصر استفاده کنیم. آن تکه می تواند اول مقدار ویژگی, آخر آن و چه در هر کجای آن باشد.
