HTML and CSS Reference
In-Depth Information
input[type] {
background-color: #444;
width: 200px;
}
This will match all input elements with an attribute of
type
, regardless of the value.
You can also use attribute selectors without specifying anything outside the square brackets
(thus targeting based on the attribute alone, irrespective of the element). It's also worth noting
that, when using values, you have the option to include quotes (single or double,) or not.
Pseudo-class
A pseudo-class uses a colon character to identify a pseudo-state that an element might be
in—for example, the state of being hovered, or the state of being activated. Let's look at a
common example:
a:hover {
color: red;
}
In this case, the pseudo-class portion of the selector is the
:hover
part. Here we've attached
this pseudo-class to all anchor elements (
<a>
elements). This means that when the user hov-
ers their mouse over an
<a>
element, the color property for that element will change to red.
This type of pseudo-class is a dynamic pseudo-class, because it occurs only in response to
user interaction—in this case, the mouse moving over the targeted element.
It's important to recognize that these types of selectors do not just select elements; they select
elements that are in a particular state. For the purposes of this example, the state is the “hov-
er” state. We'll look at other examples of pseudo-classes later in the topic.
Pseudo-element
Finally, CSS has a selector referred to as a pseudo-element and, used appropriately, it can be
very useful. The only caveat is that this selector is quite different from the other examples
we've considered. Let's see a pseudo-element in context:
