آموزش سلکتورهای CSS
#1
Note 
شما احتملا نحوه استفاده از سلکتورهای class و id می دانید، و حتی شاید تمام سلکتورهای CSS را بشناسید اما در این مقاله با درنظر گرفتن همه ی مخاطبین، به صورت خلاصه به معرفی Attribute Selectors پرداخته و در ادامه، کاربرد جالب آن را بررسی می کنیم [تصویر:  icon_smile.gif] .
معرفی سلکتور 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]
[تصویر:  CSS-Attribute-Selector-500x236.jpg]

مثال بالا، تنها یکی از ۷ حالت ممکن در استفاده از این سلکتورها می باشد. در ادامه این ۷ نوع سلکتور را معرفی کرده و تفاوت آن ها را بررسی می نماییم.
انواع Attribute Selector ها

۱) انتخاب عناصر برحسب نام Attribute

[تصویر:  css-attribute-selectors-attribute.png]

این سلکتور تمام عناصر 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

[تصویر:  css-attribute-selectors-attribute-equals.png]

این سلکتور تمام عناصر 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، جداشده با فاصله

[تصویر:  css-attribute-selectors-attribute-space.png]

این سلکتور تمام عناصر 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، دنبال شده با خط تیره

[تصویر:  css-attribute-selectors-attribute-dash.png]

این سلکتور تمام عناصر 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]

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Note آموزش ایجاد سایه منحنی با CSS SOFTAFZAR 1 650 10-08-2013 ساعت 11:46
آخرین ارسال: ehsanerfani
Note کتاب آموزش CSS Comodo 0 365 22-10-2012 ساعت 11:41
آخرین ارسال: Comodo
Note آموزش مقدماتی css SOFTAFZAR 2 550 16-07-2012 ساعت 18:24
آخرین ارسال: SOFTAFZAR

کاربرانِ درحال بازدید از این موضوع:   1 مهمان