HTML and CSS Reference
In-Depth Information
:link , :visited , and :hover
These are the most commonly used pseudo-classes, used most frequently with the anchor
element, providing a clickable link for the user of the webpage. With these pseudo-classes,
you can control what styles are applied to a hyperlink in the different states. For example, the
following CSS changes the color of the link based on its state:
a:link {
color: green;
}
a:hover {
color: red;
}
a:visited {
color: black;
}
In this example, the link by default will be green. When a user moves the mouse over the
link, the color of the link will change to red. If the user does not click the link and then moves
off of it, the link will go back to green. However, if the user clicks the link, it becomes a visited
link and will change to black.
:checked
The :checked pseudo-class lets you apply styles to elements that are in a checked state.
Elements that support this pseudo-class are check boxes and radio buttons. The amount of
styling you can apply to the default elements is minimal. However, there are ample resources
to customize these elements using CSS. The following example shows how to hide a check
box when a user clicks it.
input[type="checkbox"]:checked {
display: none;
}
:required
The :required pseudo-class lets you apply styles to any elements on the page that have
the required attribute. This is a convenient way to highlight required fields on a form. The
following CSS demonstrates applying styles to all required input controls:
input:required {
border: 2px solid red;
}
All required input controls will now have a red border to highlight this to the user.
 
Search WWH ::




Custom Search