ptg16476052More Selectors 1938
Output ▼
A number of other pseudo-classes can be used, but they are not as widely supported
in browsers as the other pseudo-classes I’ve discussed. Specifically, Internet Explorer
did not add support for them until version 9. You can read about the additional pseudo-
classes, as well as the ones that have been discussed in the Mozilla developer documenta-
tion: https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes.
Attribute Selectors
CSS also provides selectors that match the attributes associated with elements. For exam-
ple, here’s a simple selector that matches paragraphs with the class highlight:
p[class="highlight"] { font-weight: bold; }
That’s not really any more useful than simply using the selector p.highlight. The
important point is that the selector works with any attribute name and value. You can also
use the =~ operator with attributes. In that case, it will match any value in a list of values,
separated by spaces. Here ’s an example:
p[class=~"highlight"] { font-weight: bold; }
In that case, the selector would match a paragraph like the following:
This is a major highlight.
The class “highlight” is one member of the list of classes, so it matches the selector
thanks to the presence of the =~ operator.
You can also leave out the attribute value entirely and match any element that has the
listed attribute. The rule that follows will match paragraphs that have any class at all:
p[class] { font-weight: bold; }
FIGURE 8.22
Content added
to a page using
the :before and
:after pseudo-
elements.