HTML and CSS Reference
In-Depth Information
from a
PDF
to a Word document, so some-
one updates the link but forgets to update
the class? The link would be styled as a
PDF
, but it would actually be a Word doc-
ument. Wouldn't it be handy if there was
some way you could select elements based
on those other attributes rather than rely-
ing on classes and
ID
s?
CSS3
makes it possible to write selectors
that target these elements based on the
values in the
href
attribute; these are
called
attribute selectors
. One excellent
opportunity to use attribute selectors is
microdata. Remember the sample hCard from chapter 2? Here's the
listing again.
[] =
^ $ * ~
1.0
1.0
1.0
2.0
7.0
7.0
7.0
9.0
1.0
1.0
The following example has been chosen because it presents lots of suitable
attributes to demonstrate styling. But, because microdata can also be
represented entirely on invisible
meta
elements, this isn't necessarily a
good general
—
purpose approach for styling unknown microdata markup.
<section id="rob" itemscope
itemtype="http://microformats.org/profile/hcard">
<h1 itemprop="fn">Rob Crowther</h1>
<p itemprop="n" itemscope>Full name:
<span itemprop="given-name">Robert</span>
<span itemprop="additional-name">John</span>
<span itemprop="family-name">Crowther</span>
</p>
<p itemprop="org" itemscope>
<span itemprop="organization-name">Manning Publications Co.</span>
(<span itemprop="organization-unit">Hello! Series</span>)
</p>
</section>
This is what it looks like with no styling
applied. Although you could apply
classes to various elements to attach
styles, you can use the various
item*
attributes instead.
