CSS selectors — :root pseudo–class; UI element-states: ::selection pseudo–element, :checked, :disabled, :enabled

heading level5

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Code used

:root {border: 1ex solid lime;}
::selection {background: #000; color:#fff; outline:2px dotted #c00; cursor:ne-resize;}
button {color:red;} /* control color */
button:enabled {background:green; color:white;}
button:disabled {background:#aaa; color:white;}
input[type="radio"]:disabled + label {border: 1px solid #c00; font-weight:bold;}
input[type="checkbox"]:enabled + label {background:#ccc; color:#c00;}
input[type="checkbox"]:checked + label {border: 1px solid #009; font-weight:bold;}

Notes

::selection is supported by Safari and Konqueror, but only for the required properties (color and background-color). Gecko based browser support this through the proprietary -moz::selection.
for the UI states, I have used combinator selectors to work around issues with browsers that do not allow styling of form controls (Safari, Camino, Opera when the correct prefs are set).

back to introduction

Last modified: March 16 2006 09:16:20 GMT.

A [ La Chatte Noire ] development area
[ contact ]
[ sectionindex ]
[ Empty Spaces ]