شما احتملا نحوه استفاده از سلکتورهای 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  می باشد.

[/INDENT]
[align=center]

[/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>

</body> [/TD] [/TR] [/TABLE]

۲) انتخاب عناصر برحسب مقدار دقیق 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>

</body> [/TD] [/TR] [/TABLE]
     [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>

</body> [/TD] [/TR] [/TABLE]

۴) انتخاب عناصر برحسب مقدار 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>

</body> [/TD] [/TR] [/TABLE]
     [INDENT]این سلکتور در حقیقت برای Attribute های زبان ساخته شده است؛ که مقدار آنها عباراتی مانند             en-US, fa-IR, fr-FR  هستند.

[/INDENT]