HTML and CSS Reference
In-Depth Information
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
In general, the form
[att|="val"]
can be used for any attribute and its values. Let's say
you have a series of figures in an HTML document, each of which has a filename like
figure-1.gif
and
figure-3.jpg
. You can match all of these images using the following
selector:
img[src|="figure"] {border: 1px solid gray;}
The most common use for this type of attribute selector is to match language values,
as demonstrated later in this chapter.
Using Document Structure
As mentioned previously, CSS is powerful because it uses the structure of documents
to determine appropriate styles and how to apply them. That's only part of the story
since it implies that such determinations are the only way CSS uses document structure.
Structure plays a much larger role in the way styles are applied to a document. Let's
take a moment to discuss structure before moving on to more powerful forms of
selection.
Understanding the Parent-Child Relationship
To understand the relationship between selectors and documents, you need to once
again examine how documents are structured. Consider this very simple HTML
document:
<html>
<head>
<base href="http://www.meerkat.web/">
<title>Meerkat Central</title>
</head>
<body>
<h1>Meerkat <em>Central</em></h1>
<p>
Welcome to Meerkat <em>Central</em>, the <strong>best meerkat web site
on <a href="inet.html">the <em>entire</em> Internet</a></strong>!</p>
<ul>
<li>We offer:
<ul>
<li><strong>Detailed information</strong> on how to adopt a meerkat</li>
<li>Tips for living with a meerkat</li>
<li><em>Fun</em> things to do with a meerkat, including:
<ol>
<li>Playing fetch</li>
<li>Digging for food</li>
<li>Hide and seek</li>
</ol>
</li>
</ul>
