HTML and CSS Reference
Usually, you should aim to avoid having empty elements on a page (although they are sometimes used for dynamic
sites where content is added after the browser or a user carries out a particular action). To select an empty element,
use the :empty pseudo-class.
:empty() isn't supported in Internet Explorer versions 6, 7, and 8.
Selecting the Root Element
The root of a web page can be selected using :root , which most often is the <html> element.
:root() isn't supported in Internet Explorer versions 6, 7, and 8.
The Target Pseudo-Class
You are able to place an anchor link on a page that refers to a section on that same page.
At the bottom of the Cool Shoes & Socks page, there is a Back to Top anchor link, which links to the element with
an ID of header . When the user clicks that link, the browser moves back up to the header element (at the top of the
page). The header is the target of this link.
If a user clicks on an anchor link, you can style its target to make it stand out, like so:
The UI Element States Pseudo-Classes
The :enabled and :disabled pseudo-classes are used to select elements in enabled and disabled states. For ex-
ample, on a dynamic page, a form may contain input fields irrelevant to a particular user and can be disabled to pre-
vent the user from interacting with that field.
You disable a field in the HTML, as follows:
<input disabled type=”email” placeholder=”Your Email Address” />
A field that isn't disabled is considered enabled. If you want to prevent user frustration when disabling an input field,
it's a good idea to change its color to represent that, like so:
Another element state pseudo-class is :checked , which again relates to input forms—this time, check boxes and
radio buttons. When an element is checked, it can be styled as follows:
:enabled() , :disabled() and :checked() , aren't supported in Internet Explorer versions 6, 7, and 8.
The Language Pseudo-Class