HTML and CSS Reference
In-Depth Information
Match the End of a Value
To match the last few characters of an attribute's value, precede the equal sign with a dollar sign. For example, the
following style rule matches all links to PDF documents, and displays a PDF symbol alongside the link text:
a[href$=".pdf"] {
padding-right: 20px;
background-image: url(../images/pdficon small.gif);
background-repeat: no-repeat;
background-position: right center;
}
Quotation marks around the value of an attribute selector are optional if the value contains only alphanu-
meric characters.
Note
Grouping Multiple Selectors
To avoid repetition when applying the same styles to several elements, you can group selectors as a comma-
separated list. For example, the following style rule changes the color of all headings:
h1, h2, h3, h4, h5, h6 {
color: red;
}
Trying It Out
It's time to put some of that theory to the test. Listing 2-2 shows the HTML markup in the <body> of basic.html ,
which you'll style using the basic selectors in Table 2-1 .
Listing 2-2. The <body> Section in basic.html
<body>
<h1>Beginning CSS3</h1>
<ul id="nav" >
<li><a href="#">Introducing CSS—the Language of Web Design</a></li>
<li><a href="#">Specifying Sizes, Colors, and Files</a></li>
<li><a href="http://apress.com/">Apress—Books for Professionals by Professionals</a></li>
</ul>
<div id="main" >
<h2>Deciding Which Selector to Use</h2>
<p class="intro" >Instead of attempting to cover the full range of <abbr title="Cascading
Style Sheets">CSS</abbr> selectors, I think it makes sense to begin with a subset of the most
widely supported. The <a href="http://www.quirksmode.org/css/contents.html">compatibility charts
compiled by Peter-Paul Koch</a> provide detailed support information.</p>
<h3>Type Selectors</h3>
<p>A <dfn>type selector</dfn> uses the name of an HTML tag without the angle brackets,
and redefines the default look of the tag. For example, <code>h1</code> defines the style of
<code><h1></code> tags. You can use type selectors for all HTML 4.01 and XHTML 1.0 elements
without problem.</p>
 
 
Search WWH ::




Custom Search