HTML and CSS Reference
In-Depth Information
a[href*="anselmbradford.com"][rel="prefetch"]
{
col-
or:orange; }
This would only match hyperlink anchors that linked to resources that contained "an-
selmbradford.com" as part of their URL and had their rel attribute set to prefetch ,
like so:
<a href="http://blog.anselmbradford.com"
rel="prefetch">Anselm's blog</a>
The possibilities of attribute selectors are numerous. Examples include picking spe-
cific file types out of a , img , or object source URLs in order to handle styling based
on file type. As another example, the polymorphic input element can easily have its
different types styled using attribute selectors. For instance:
input[type="password"] { border:1px solid red; }
This style rule would add a red border around all password input form controls.
When using a class selector on an element, ask yourself whether there is an attribute
already present that could be picked out instead. If an existing attribute could be used,
adding an additional class attribute solely for styling purposes creates extraneous code
that may need to be maintained and updated down the road. For instance, if the pre-
ceding style rule were changed to use a class selector instead of an attribute selector, it
would mean you would have to remember to add the correct class attribute value to any
new password input form controls added to the page instead of relying on their existing
type attribute, which they all would need to have anyway.
Styling links and fragment identifier targets
The next group of selectors have to do with the behavior of hyperlinks, called location
pseudoclass selectors ( Table 6-6 ); this small group deals with referencing unvisited and
visited links and fragment identifiers. The :link and :visited selectors are self-ex-
planatory as well as being nothing new, so let's look instead at the new :target se-
lector and how it deals with fragment identifiers.
Search WWH ::




Custom Search