11- S1,S2
در مثال فوق Text 1 و Text 3 و همچنین محتوای تگ table به رنگ قرمز نمایش می‌یابند.
در مثال فوق، تگ h1 که ویژگی id آن برابر index می‌باشد، با توجه به Selector ی که بصورت h1#index تعریف شده است، به رنگ آبی نمایش می‌یابد. تمامی تگهای span که عضو کلاس tag می‌باشند و در داخل تگ div ی قرار دارند که عضو کلاس content است، با توجه به Selector ی که بصورت .content .tag تعریف شده است، به رنگ قرمز نمایش می‌یابند. تمامی تگهای li که ویژگی class آنها برابر even می‌باشد، و فرزند تگ ul ی هستند که عضو کلاس list است، با توجه به Selector ی که بصورت ul.list li.even تعریف شده است، به رنگ سبز نمایش می‌یابند.
12- [attribute]
در مثال فوق، رنگ پس زمینه تگ input اول که دارای ویژگی readonly می‌باشد، به رنگ سبز نمایش می‌یابد.
13- [attribute=value]
در مثال فوق، جهت نوشتاری محتوای تگ div که دارای ویژگی lang با مقدار fa می‌باشد، از راست به چپ می‌شود و در سمت راست صفحه نمایش می‌یابد.
14- [attribute=value i]
در مثال فوق، جهت نوشتاری محتوای تگ div که دارای ویژگی lang با مقدار FA می‌باشد، از راست به چپ می‌شود و در سمت راست صفحه نمایش می‌یابد. با اینکه در Selector مقدار fa با حروف کوچک ذکر شده است.
15- [attribute|=value]
در مثال فوق Text 1 و Text 4 به رنگ قرمز نمایش می‌یابند.
16- [attribute^=value]
در مثال فوق Text 1 و Text 2 و Text 3 و Text 4 به رنگ قرمز نمایش می‌یابند.
17- [attribute~=value]
در مثال فوق Text 1 و Text 3 و Text 6 و Text 9 به رنگ قرمز نمایش می‌یابند.
18- [attribute*=value]
در مثال فوق تمامی متون به رنگ قرمز نمایش می‌یابند.
19- [attribute$=value]
در مقال فوق Text 1 و Text 5 و Text 6 و Text 7 به رنگ قرمز نمایش می‌یابند.
اگر بخواهیم قالب بندی را برای چند Selector به صورت یکجا انجام دهیم، این Selectorها را با کاما (,) از هم جدا می‌نماییم.
<style>
div,.content,table.main {
color: red;
}
</style>
<div>Text 1</div>
<p>Text 2</p>
<table class="main" border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
<span class="content">Text 3</span>
<h1>Text 4</h1> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | Yes | Yes | Yes | S1,S2 | 1 |
توجه:
Selectorها می‌توانند به صورت ترکیبی نیز استفاده شوند. به مثال زیر توجه کنید:
<style>
.content .tag {
color: red;
}
h1#index {
color: blue;
}
ul.list li.even {
color: green;
}
</style>
<h1 id="index">Index</h1>
<h1>Header 1</h1>
<div class="content">
Lorem ipsum dolor sit amet, <span class="tag">consectetuer</span> adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, <span class="tag">sit</span> amet commodo magna
eros quis urna. Nunc viverra <span class="tag">imperdiet</span> enim. Fusce est.
</div>
<h1>Header 2</h1>
<div class="content">
<ul class="list">
<li>Item 1</li>
<li class="even">Item 2</li>
<li>Item 3</li>
<li class="even">Item 4</li>
<li>Item 5</li>
<li class="even">Item 6</li>
</ul>
</div> 12- [attribute]
تگ‌هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص باشند.
<style>
[readonly] {
background: green;
}
</style>
<input type="text" value="Value 1" readonly="readonly"/>
<input type="text"/> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | [attribute] | 2 |
13- [attribute=value]
تگ هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص هستند و مقدار آن ویژگی دقیقا برابر با value می‌باشد.
<style>
[lang=fa] {
direction:rtl;
}
</style>
<div lang="fa">متن 1</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | [attribute=value] | 2 |
14- [attribute=value i]
تگ‌هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص هستند و مقدار آن ویژگی دقیقا برابر با value می‌باشد. همچنین value، نسبت به حروف کوچک و بزرگ حساس نمی‌باشد.
<style>
[lang=fa] {
direction:rtl;
}
</style>
<div lang="FA">متن 1</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | [attribute=value i] | 4 |
15- [attribute|=value]
تگ هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص هستند و مقدار آن ویژگی با یک value خاص آغاز می‌شود. کلمه آغازین مقدار حتما باید با value برابر باشد یا با dash (-) از کلمه‌ی بعدی جدا شده باشد.
<style>
[class|=info] {
color:red
}
</style>
<div class="info">Text 1</div>
<div class="infobar">Text 2</div>
<div class="info bar">Text 3</div>
<div class="info-bar">Text 4</div>
<div class="btninfo">Text 5</div>
<div class="btn info">Text 6</div>
<div class="btn-info">Text 7</div>
<div class="toolinfoicon">Text 8</div>
<div class="tool info icon">Text 9</div>
<div class="tool-info-icon">Text 10</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | [attribute|=value] | 2 |
16- [attribute^=value]
تگ‌هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص هستند و مقدار آن ویژگی با یک value خاص آغاز می شود.
<style>
[class^=info] {
color: red;
}
</style>
<div class="info">Text 1</div>
<div class="infobar">Text 2</div>
<div class="info bar">Text 3</div>
<div class="info-bar">Text 4</div>
<div class="btninfo">Text 5</div>
<div class="btn info">Text 6</div>
<div class="btn-info">Text 7</div>
<div class="toolinfoicon">Text 8</div>
<div class="tool info icon">Text 9</div>
<div class="tool-info-icon">Text 10</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 7.0 | 3.5 | 4.0 | [attribute^=value] | 3 |
17- [attribute~=value]
تگ‌هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص هستند و مقدار آن ویژگی شامل یک value خاص می‌باشد که با Space یا فاصله‌ی خالی از سایر مقادیر جدا شده است.
<style>
[class~=info] {
color: red;
}
</style>
<div class="info">Text 1</div>
<div class="infobar">Text 2</div>
<div class="info bar">Text 3</div>
<div class="info-bar">Text 4</div>
<div class="btninfo">Text 5</div>
<div class="btn info">Text 6</div>
<div class="btn-info">Text 7</div>
<div class="toolinfoicon">Text 8</div>
<div class="tool info icon">Text 9</div>
<div class="tool-info-icon">Text 10</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | [attribute~=value] | 2 |
18- [attribute*=value]
تگ‌هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص هستند و مقدار آن ویژگی شامل یک value خاص می‌باشد.
<style>
[class*=info] {
color: red;
}
</style>
<div class="info">Text 1</div>
<div class="infobar">Text 2</div>
<div class="info bar">Text 3</div>
<div class="info-bar">Text 4</div>
<div class="btninfo">Text 5</div>
<div class="btn info">Text 6</div>
<div class="btn-info">Text 7</div>
<div class="toolinfoicon">Text 8</div>
<div class="tool info icon">Text 9</div>
<div class="tool-info-icon">Text 10</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 7.0 | 3.5 | 4.0 | [attribute*=value] | 3 |
19- [attribute$=value]
تگ‌هایی را انتخاب می‌نماید که دارای یک attribute یا ویژگی خاص هستند و مقدار آن ویژگی به یک value خاص ختم می‌شود.
<style>
[class$=info] {
color: red;
}
</style>
<div class="info">Text 1</div>
<div class="infobar">Text 2</div>
<div class="info bar">Text 3</div>
<div class="info-bar">Text 4</div>
<div class="btninfo">Text 5</div>
<div class="btn info">Text 6</div>
<div class="btn-info">Text 7</div>
<div class="toolinfoicon">Text 8</div>
<div class="tool info icon">Text 9</div>
<div class="tool-info-icon">Text 10</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 7.0 | 3.5 | 4.0 | [attribute$=value] | 3 |
