شما احتملا نحوه استفاده از سلکتورهای class و id می دانید، و حتی شاید تمام سلکتورهای CSS را بشناسید اما در این مقاله با درنظر گرفتن همه ی مخاطبین، به صورت خلاصه به معرفی Attribute Selectors پرداخته و در ادامه، کاربرد جالب آن را بررسی می کنیم
.
معرفی سلکتور Attribute در CSS
CSS قادر است تا عناصر یا تگ های HTML را بر اساس Attribute آن ها انتخاب کند. به عنوان مثال، تگ زیر را درنظر بگیرید:
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"]
[/TD]
[TD="class: crayon-code"]<p id="content" class="box" lang="fa">این یک پاراگراف است.</p>
[/TD]
[/TR]
[/TABLE]
این تگِ پاراگراف سه Attribute دارد: class ،id و lang. شما برای انتخاب این عنصر HTML در CSS، می توانید علاوه بر id سلکتور: content# و یا class سلکتور: box.، از هریک از Attribute های آن، استفاده کنید. برای مثال، اگر برای اعمال یک ویژگی، مثل تغییر رنگِ متن پاراگراف، به صورت زیر عمل می کردید:
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
[/TD]
[TD="class: crayon-code"]#content { color: red; }
/* or */
.box { color: green; }
[/TD]
[/TR]
[/TABLE]
با استفاده از سلکتور Attribute میتوانید ویژگی مورد نظرتان را به آن (یا به تمام تگ های HTML که دارای چنین Attribute باشند) اعمال کنید:
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
[/TD]
[TD="class: crayon-code"][lang="fa"] {
color: blue;
}
[/TD]
[/TR]
[/TABLE]
[INDENT] نکته: اگر هم زمان از سلکتورهای بالا استفاده میکنید، ابتدا باید مرتبه ی اولویت آن ها و سپس نحوه ی محاسبه ی اولویت سلکتورهای ترکیبی را بشناسید. به طور خلاصه، اولویت سلکتورها در CSS، به صورت: style > #id > .class = otherAttributes > TagName می باشد.
[/align]
مثال بالا، تنها یکی از ۷ حالت ممکن در استفاده از این سلکتورها می باشد. در ادامه این ۷ نوع سلکتور را معرفی کرده و تفاوت آن ها را بررسی می نماییم.
انواع Attribute Selector ها
۱) انتخاب عناصر برحسب نام Attribute
[align=center]
[/align]
این سلکتور تمام عناصر HTML دارای ویژگی یا صفت AttributeName را انتخاب میکند، بدون آنکه به مقدار اختصاص یافته به آن، توجهی داشته باشد.
مثال زیر، تمام تگهای p یا پاراگراف دارای ویژگی title را انتخاب می کند، بدون آنکه به مقدار آن اهمیت دهد:
style.css CSS
p[title] { color: red; font-size: 18px; }
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
[/TD]
[TD="class: crayon-code"]p[title] {
color: red;
font-size: 18px;
}
[/TD]
[/TR]
[/TABLE]
index.html XHTML
<body> <p title="sample text">This is a paragraph.(with title attribute)</p> <p>This is a paragraph.</p> </body>
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
[/TD]
[TD="class: crayon-code"]<body>
<p title="sample text">This is a paragraph.(with title attribute)</p>
<p>This is a paragraph.</p>
۲) انتخاب عناصر برحسب مقدار دقیق Attribute
[align=center]
[/align]
این سلکتور تمام عناصر HTML دارای ویژگی یا صفت AttributeName با مقدار دقیق value را انتخاب می کند.
مثال زیر، تمام تگهای span دارای ویژگی class با مقدار دقیق example را انتخاب می کند:
style.css CSS
span[class="example"] { color: red; font-size: 18px; }
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
[/TD]
[TD="class: crayon-code"]span[class="example"] {
color: red;
font-size: 18px;
}
[/TD]
[/TR]
[/TABLE]
index.html XHTML
<body> <p>This is a <span class="example">paragraph</span>.</p> <p>This is a <span class="test">paragraph</span>.</p> </body>
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
[/TD]
[TD="class: crayon-code"]<body>
<p>This is a <span class="example">paragraph</span>.</p>
<p>This is a <span class="test">paragraph</span>.</p>
[INDENT]نکته: اگر بنا به هر دلیلی class و یا id یک تگِ HTML از کاراکترهای غیرقابل قبول در CSS تشکیل شده باشد، می توان با استفاده Attribute Selector آن عنصر را انتخاب نمود. برای مثال اگر id یک تگ div به شکل module-custom?&id_lang=2 تعریف شده باشد، می توان با استفاده از سلکتور ["div[id="module-custom?&id_lang=2 تگ مورد نظر را انتخاب نمود.
[/INDENT]
۳) انتخاب عناصر برحسب مقدار Attribute، جداشده با فاصله
[align=center]
[/align]
این سلکتور تمام عناصر HTML دارای ویژگی یا صفت AttributeName با مقدار value که در یک یا دو سمت خود با یک کاراکتر فاصله جدا شده اند را انتخاب می کند.
مثال زیر، تمام تگهای h2 دارای ویژگی title با مقدار CSS که در یک و یا دو سمت آن، یک کاراکتر فاصله واقع شده است را انتخاب می کند. به بیانی دیگر، در این روش، تنها عناصری انتخاب می شوند که در آنها عبارت CSS وارد شده در ویژگی title، از سمت چپ یا راست و یا از هر دو سمت، به یک کاراکتر فاصله یا space متصل باشند:
style.css CSS
h2[title~="CSS"] { color: red; font-size: 28px; }
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
[/TD]
[TD="class: crayon-code"]h2[title~="CSS"] {
color: red;
font-size: 28px;
}
[/TD]
[/TR]
[/TABLE]
index.html XHTML
<body> <h2 title="CSS Selectors">CSS Selectors Level 3</h2> <h2 title="CSSColors">CSS Color Module Level 3</h2> <h2 title="new CSS">New CSS Module Level 3</h2> </body>
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
5
[/TD]
[TD="class: crayon-code"]<body>
<h2 title="CSS Selectors">CSS Selectors Level 3</h2>
<h2 title="CSSColors">CSS Color Module Level 3</h2>
<h2 title="new CSS">New CSS Module Level 3</h2>
۴) انتخاب عناصر برحسب مقدار Attribute، دنبال شده با خط تیره
[align=center]
[/align]
این سلکتور تمام عناصر HTML دارای ویژگی یا صفت AttributeName با مقدار آن، با عبارت value آغاز شده و یک کاراکتر خط تیره یا - بلافاصله بعد از آن آمده است را انتخاب می کند.
مثال زیر، تمام تگهای a دارای ویژگی hreflang با مقدار ابتدایی fa که یک کاراکتر - در ادامه ی آن آمده است را انتخاب می کند:
style.css CSS
a[hreflang|="fa"] { font-weight: bold; text-decoration: none; }
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
[/TD]
[TD="class: crayon-code"]a[hreflang|="fa"] {
font-weight: bold;
text-decoration: none;
}
[/TD]
[/TR]
[/TABLE]
index.html XHTML
<body> <p> <a href="http://kava.ir/" hreflang="fa-IR">KAVA</a> is an online tutorial website. </p> </body>
[TABLE="class: crayon-table"]
[TR="class: crayon-row"]
[TD="class: crayon-nums"] 1
2
3
4
5
6
[/TD]
[TD="class: crayon-code"]<body>
<p>
<a href="http://kava.ir/" hreflang="fa-IR">KAVA</a>
is an online tutorial website.
</p>
[INDENT]این سلکتور در حقیقت برای Attribute های زبان ساخته شده است؛ که مقدار آنها عباراتی مانند en-US, fa-IR, fr-FR هستند.
[/INDENT]