HTML and CSS Reference
In-Depth Information
You now know all there is to know about CSS3 selectors based on the
structure of the document, but there's more to CSS3 than that. In the next
section you'll learn about selecting elements based on their attributes.
Choosing elements by their attributes
You should by now be aware that
CSS
provides convenient shorthand
for selecting elements according to their class and
ID
. But class and
ID
are just two of many attributes that can be applied to
HTML
elements.
Here are some common scenarios with another common attribute, the
href
on links.
Different styling for
external links
Different styling
for an element
based on the
URL
Different styling for
file downloads
If you were using
HTML4
and
IE6
-compatible
CSS2
, you'd probably
implement these examples by adding an explicit class to the elements
concerned:
<a
class="external"
href="http://site.com/
">
Visit site
</a>
<a
class="home"
href="/home">
Home
</a>
<a
class="pdf"
href="doc.pdf">
Download document
</a>
In these examples, the
class
attribute is really just duplicating informa-
tion available in the
href
attribute. Whenever there's duplicate informa-
tion, there's an opportunity for the two sets of information to get out of
sync. For example, what if the document in the third example changes
