<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
<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
<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
<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>
|
|
|
|
| Selector | نسخه CSS |
3.1 | 7.0 | 9.0 | 3.5 | 4.0 | :before | 2 |
47- ::selection
<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)
<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)
<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)
<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 |