41- :checked
برای تگهای radio و checkbox استفاده میشود و آنهایی را انتخاب میکند که گزینه‌ی آنها انتخاب شده است یا شامل ویژگی checked می‌باشند.
<style>
:checked {
width: 50px;
height: 50px;
}
</style>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="radio" name="test"/>
<input type="radio" name="test" checked="checked"/>
<input type="radio" name="test"/> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :checked | 3 |
42- :indeterminate
در HTML نمی‌توان وضعیت indeterminate را برای checkbox ایجاد نمود. اما با جاوا اسکریپت می‌توان این وضعیت را ایجاد کرد. هر checkbox می‌تواند دارای سه وضعیت انتخاب شده، انتخاب نشده و نامعلوم (indeterminate) باشد. این Selector تگهای checkbox ی را انتخاب می‌نماید که وضعیت نامعلوم دارند.
<style>
:indeterminate {
width: 50px;
height: 50px;
}
</style>
<input type="checkbox" id="chk1"/>
<input type="checkbox" id="chk2" checked="checked"/>
<input type="checkbox" id="chk3"/>
<script>
document.getElementById("chk1").indeterminate=true;
</script> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :indeterminate | 4 |
43- :default
برای تگهای radio و checkbox، آنهایی را انتخاب میکند که در زمان بارگزاری فرم و بصورت پیش فرض انتخاب شده‌اند. برای دکمه‌ی submit ایی نیز استفاده میشود که در حال حاضر در فرم فعال می‌باشد. پشتیبانی از این Selector در مرورگرها متفاوت می‌باشد؛ بنابراین در چند مرورگر کارآیی آن را بررسی کنید.
<style>
:default {
width: 50px;
height: 50px;
background: lime;
}
</style>
<form>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="radio" name="radio1" />
<input type="radio" name="radio1" checked="checked" />
<input type="radio" name="radio1" />
<input type="submit" value="Default" />
<input type="submit" value="Submit 2" />
</form> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :default | 4 |
44- :root
المنت ریشه‌ی یک صفحه را انتخاب می‌نماید. معمولا تگ html به عنوان المنت ریشه انتخاب میشود.
<style>
:root {
background: khaki;
}
</style> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :root | 3 |
45- :after
جهت درج محتوا بعد از تگ استفاده میشود.
<style>
form:after {
content: "[ * : Required]";
color: red;
}
input+span:after {
content: ' * ';
color: red;
}
</style>
<form>
<div><input type="text" /><span></span></div>
<div><input type="password" /><span></span></div>
<div><input type="email" /><span></span></div>
</form> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 7.0 | 9.0 | 3.5 | 4.0 | :after | 2 |
46- :before
جهت درج محتوا قبل از تگ استفاده میشود.
<style>
form:before {
content: "[ * : Required]";
color: red;
}
input + span:before {
content: ' * ';
color: red;
}
</style>
<form>
<div><input type="text" /><span></span></div>
<div><input type="password" /><span></span></div>
<div><input type="email" /><span></span></div>
</form> در مثال فوق قبل از تمامی spanهای قرار گرفته در کنار تگهای input، یک کاراکتر * را به رنگ قرمز نمایش میدهد. قبل از فرم نیز رشته‌ی [ * : Required] را به رنگ قرمز نمایش میدهد.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 7.0 | 9.0 | 3.5 | 4.0 | :before | 2 |
47- ::selection
محتوایی را انتخاب میکند که در حال حاضر در صفحه انتخاب یا Select شده‌است.
<style>
::selection {
background: navy;
color: orange;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere,
magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
</p> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 9.0 | 2.0 -moz- | 4.0 | ::selection | در CSS 3 معرفی و سپس حذف شد ولی امکان بازگشت مجدد وجود دارد |
48- :not(S1,S2)
تگ هایی را انتخاب میکند که شامل Selectorهای S1 یا S2 یا ... یا Sn نباشند.
<style>
:not([readonly]) {
background: yellow;
}
</style>
<input type="text"/>
<input type="text" readonly="readonly"/>
<input type="text"/>
<input type="text" readonly="readonly" /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :not(S1,S2) | 3 |
49- :matches(S1,S2)
تگ هایی را انتخاب میکند که شامل Selectorهای S1 و/یا S2 و/یا ... و/یا Sn باشند.
<style>
:matches([readonly]) {
background: yellow;
}
</style>
<input type="text" />
<input type="text" readonly="readonly" />
<input type="text" />
<input type="text" readonly="readonly" /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :matches(S1,S2) | 4 |
50- :has(S1,S2)
تگ هایی را انتخاب میکند که در ارتباط خاصی با Selector های S1 و/یا S2 و/یا ... و/یا Sn می‌باشند.
<style>
:has(>span) {
color: red;
}
:has(+div) {
color: blue;
}
</style>
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas <span>porttitor</span> congue massa. Fusce posuere,
magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
</p>
<h1>Header 1</h1>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere,
magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :has(S1,S2) | 4 |
