HTML and CSS Reference
In-Depth Information
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:
:target {
color: red;
}
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:
:disabled {
background-color: lightgray;
}
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:
:checked {
background-color: green;
}
:enabled()
,
:disabled()
and
:checked()
, aren't supported in Internet Explorer versions 6, 7, and 8.
The Language Pseudo-Class
