DZone, Inc. | www.dzone.

com
CONTENTS INCLUDE:
n
Element Selectors
n
ID Selectors
n
Descendent Selectors
n
Attribute Selectors
n
Combining Selectors
n
Hot Tips and more...
Just in case youve not read Core CSS: Part I, Ill briey review
the purpose of a CSS selector. A selector in a style sheet signals
the browser to nd matches within those markup (HTML,
XHTML, XML) documents to which the style sheet is related.
There are more than a few selectors available for use (Table 1),
but even intermediate and advanced CSS authors dont always
have an opportunity to use some of them, largely due to cross-
browser support issues for a given selector. Core CSS: Part II will
cover CSS 2.0/2.1 selectors. Where a selector is unavailable in
contemporary Web browsers, a caution will be provided to alert
you to any support concerns.
To assist in visualizing how these selectors actually match, for
each example youll see an element, the corresponding CSS,
and a document tree that visualizes what is selected within a
sample document. Also provided are some use examples.
Element Selectors
Element selectors, also referred to as type selectors, select by
matching elements. They are very broad in scope. For example,
if I have a million documents with many more millions of h2
elements within them, by using an element selector I can single
handedly apply styles to all of those h2 elements using one
rule. Element selectors are supported in all CSS browsers and
are very widely used for these reasons.
Heres a CSS rule using an element selector:
h2 {color: #f00; font-family: Garamond; font-size:
22px; font-variant: small-caps;}
In the corresponding markup document(s), all h2s are selected
and the style is applied (Figure 1).
Element Selectors, continued
Class Selectors
Class selectors are extremely useful selectors that allow authors
to add a class attribute to a given element in the markup, with a
custom value. Then using that value preceded by a dot, write a
corresponding rule using the class name.
An example of an element with an added class attribute in the
markup document would be:
<p class=warning>Any paragraph in any document on
any page containing this class will have the class
rules apply.</p>
In the CSS:
.warning {color: red; font-weight: bold;}
Figure 2 shows how this class, as written, will apply to both
elements with the class attribute named warning.
ALL ABOUT SELECTORS
C
o
r
e

C
S
S
:

P
a
r
t

I
I





















w
w
w
.
d
z
o
n
e
.
c
o
m


























G
e
t

M
o
r
e

R
e
f
c
a
r
d
z
!

V
i
s
i
t

r
e
f
c
a
r
d
z
.
c
o
m

n
Authoritative content
n
Designed for developers
n
Written by top experts
n
Latest tools & technologies
n
Hot tips & examples
n
Bonus content online
n
New issue every 1-2 weeks
Subscribe Now for FREE!
Refcardz.com
Get More Refcardz
(Theyre free!)
Core CSS: Part II
By Molly E. Holzschlag

Table 1. CSS Selectors Covered in this Refcard

Version Date
Element Selects by matching element
Class Selects by matching class name
ID Selects by matching id name
Pseudo Class Selects by matching predened pseudo class
Descendent
(also known as contextual)
Selects by descendant elements
Child Selects by rst-level (child) elements
Adjacent Sibling Selects by matching sibling element
Attribute Selects by matching attribute names and values
Pseudo Elements Selects by matching predened pseudo element
Hot
Tip
Theres also a universal selector, *, which when
used will select every single element within a
document. Its used in several hacks, including
the infamous star html hack, which is prob-
lematic and invalid. While the universal selector is important
to know about, its probably not going to be something you
use too often in real-world scenarios.
Figure 1. An HTML document tree showing that each of the h2s in the
document has been selected.
Figure 2. Selecting all elements with a class of warning.
#25
Core CSS: Part II
2
DZone, Inc. | www.dzone.com
tech facts at your fingertips
Class Selectors, continued
Multi-Classing
An interesting and occasionally useful technique is multi-classing.
This means using more than one class to get the style youre
after. A good use scenario would be a portal site in which you
have multiple modules that have common colors and features,
but require different background images. Consider the following
style rules:
.module1 {width: 200px; margin: 5px; border:
1px solid blue;}
.weather {background-image: url(images/sunshine.jpg);}
To multiclass, Id simply add both classes to the module element,
with each name separated by a space:
<div class=module1 weather> . . . </div>
The element will now pick up the styles of both classes. Typically,
use of 2-3 class names can be helpful within context, but its not
a practice Id recommend using without a strong sense of your
site hierarchy and management.
Its also important to point out that the source order of the class
names in the markup document is of no consequence. However,
if there are conicts between the classes, sort order and specicity
rules in CSS will calculate which rule takes precedence.
ID Selectors
ID selectors are meant to identify a discrete portion of a
document. This means an ID name can be used exactly one
time in a given document. This is why IDs are particularly useful
in CSS layout when identifying signicant portions of the
document, such as content nav or site-infobecause
they are unique, discrete pieces of the document structure.
Assuming only one document, heres a right/wrong comparison:
Right:
<div id=content> . . . </div>
<div id=sub-content> . . . </div>
Wrong:
<div id=content> . . . </div>
<div id=content> . . . </div>
In the style sheet ID selectors are written using the hash #
(also known as an octothorpe for the word geeks among you)
preceding a custom name.
#content {width: 500px; border: 1px solid #fff;}
Figure 3 shows how this will now select the div with the unique id
attribute named content.
ID Selectors, continued
Pseudo Class Selectors
A pseudo class selector is a set of predened class-like selectors.
Pseudo class selectors are written with a colon followed by
the predened pseudo class name. Pseudo classes can then
be attached to a variety of elements in order to achieve a
given result. Its likely youve used pseudo classes as much
as element, ID, and class selectors, for a number of them are
integral to styling links (Table 2).
Note that :hover, :focus and :active are all referred to as
dynamic pseudo classes because along with presentation
they also allow for dynamic behavior, such as creating interesting
looks for navigation, assisting with usability, and styling form
controls. An example would be (Figure 4).
Child Selectors
Child selectors are created by combining a parent element
with the > combinator and a child element. This allows you to
style only the child element or elements of the parent, without
having those styles inherit down the tree. Its also a great way
Hot
Tip
You can limit a class to a specic element by
placing the element selector before the class:
p.warning. If you were to do this, only the para-
graph will take on the class styles. Any other,
non-conicting styles that exist for the element p will also
be sorted and included.
Hot
Tip
Avoid underscores and other special characters
in class and ID names. The best practice currently
is to use hyphenation: nav-main (not nav_main).
Also, while camelCasing is extremely useful to
coders, it can add a layer of extra testing because CSS requires
case-matching, so case within the markup documents and
any associated CSS must match for rules to apply.
Hot
Tip
While ID and Class names are in fact customized
to suit your needs, its considered best practice
to avoid presentational names such as .redfont
or #sidebar. What happens when the boss
says update all the red fonts on the site to be blue? Easy
enough to change the style in moments and update all those
fonts, but now the markup documents are littered with
class="redfont" when the actual visual result is blue! To
avoid confusion of this nature, use naming that is descrip-
tive (referred to as semantic naming) and where possible,
consider creating conventions to be used site-wide.
Figure 3. Using ID selectors to identify the content area. The id name
can only be used once per document, but many times within a site.

Table 2. Pseudo Class Selectors

Selector Purpose Example
:link Selects links that have not
been visited
a:link {color: blue;}
:visited Selects links that have been
visited
a:visited (color: violet;}
:hover Selects an element as the
mouse passes over.
a:hover {color: #ccc;}
:focus Selects the element that has
focus
a:focus {background-color:
orange;}
:active Selects a link that is being
activated
a:active {color: red;}
:frst-child Selects an elements rst child div:frst-child {font-style:
italic;}
:lang Selects by matching human
language
html:lang (de) {font-size: 80%;}
Figure 4. The form control that has focus (in this case the text input
box associated with Name) takes on the style you see here using
the :focus selector on the input element.


3
DZone, Inc. | www.dzone.com
Core CSS: Part II
tech facts at your fingertips
Child Selectors, continued
to reduce the use of class attributes, which help make managing
sites all the more easy. Consider Figure 5.
Here, we have a parent element, ul, and we want to style each
of the three list items below. The CSS rule would simply be:
ul>li {border: 0; margin 0; padding: 0;}
Now all the children of any ul will have 0 border, margin and
padding. Because in this example, the ul has an ID, we can use
that to limit this rule only to that discrete document element:
ul#nav > li {border: 0; margin 0; padding: 0;}
Not only has this limited the rule to the ul with an id of nav,
but it has also made the rule more specic both literally and
technically. Also, youll note that theres no white space
surrounding the combinator in the rst example, whereas in the
second, there is. Either way is acceptable according to the spec.
You can use as many children within the selector as is required.
In a scenario such as Figure 6, you could write a very specic
selector to select only the children of the nested ordered list
item and style it with a leading zero decimal.
The resulting CSS would be:
ul#nav > li > ul > li > ol > li {list-style-type:
decimal-leading-zero;}
Descendent Selectors
Descendent selectors, as with Child selectors, begin with
an element that has descendents. The combinator for
descendents is a space. Since children are descendents, we
can re-examine the same parent-child relationship we rst did
when examining child selectors (Figure 7).
If I wanted to set a style for any descendent list items within an
unordered list using a descendent selector, I can do so as follows:
ul#nav li {list-style-type: none;}
Descendent Selectors, continued
The differences is that not only the li children of the ul will be
styled, but all li descendants of that ul and the ol will get the
same style as well since all list items descend from the original
unordered list (Figure 8).
As with child selectors, we can create strings to reach a particular
element within the tree:
ul#nav li ul li ol li {list-style-type: decimal-
leading-zero;}
The selector will now select the very last list item in Figure 8,
which is the child of the ordered list item element in the tree
hierarchy. None of the other list items will take on this rule.
Fortunately, Descendent selectors are widely supported in
current CSS browsers including IE 6.0 and later.
Adjacent Sibling Selectors
An Adjacent Sibling selector allows you to select an element based
on its nearest sibling element. Consider the following markup:
<div>
<h1>Main Content Header</h1>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>
Its a common design theme to style a rst paragraph somewhat
differently using a larger font, or emphasized font, bringing
the readers eye to the critical introductory material. Using an
Adjacent sibling selector, we can do this quite easily without
using a class attribute on the rst paragraph. The combinator
for the Adjacent sibling selector is the plus sign, +.
h1+p {font-weight: bold;}
This selects the rst adjacent paragraph element (Figure 9),
with no change to any of the other siblings.
You can use multiple sibling elements to reach a given
sibling. Lets say you wanted to select not the rst but the
third paragraph in the example and have it display as italic.
The syntax would be:
h1+p+p+p {font-style: italic;}
Figure 10 shows the selection.
Figure 5. An unordered list element (parent) with three list item child
elements.
Figure 7. Children are also descendents.
Figure 6. Tree depicting a nested ordered list within a nested unor-
dered list with a parent unordered list. Using Child selectors, we can
select children by following their ancestral path.
Figure 8. Descendent selectors select all descendents of the dened
parent element, in this case, nested unordered lists. Note that the list
item that is child to the ordered list element will also receive the style,
for it too is a descendent of the original parent list.
CAUTION: CHILD SELECTORS ARE NOT IMPLEMENTED
IN INTERNET EXPLORER 6.0 OR BELOW.

Figure 9. Selecting a sibling using Adjacent sibling selectors.

Figure 10. Selecting a further removed sibling using a string of
adjacent siblings.


4
DZone, Inc. | www.dzone.com
Core CSS: Part II
tech facts at your fingertips
Adjacent Sibling Selectors, continued
Attribute Selectors
Attribute selectors are a curious piece of selectors because
they really are more akin to programmatic pattern matching
than presentational design needs. There are four Attribute
selectors that are available in CSS 2.1 (Table 3).
To select by attribute name...
Compare the following two links:
<a href=http://molly.com/ title=go to Mollys Web
site>Molly.Com, Inc.</a>
<a href=http://molly.com/>Molly.Com, Inc.</a>
In the rst link, theres a title attribute. Using the following CSS:
a[title] {font-style: italic;}
We can style any anchor elements with a title attribute present,
but the style will not apply where no title attribute is present
(Figure 11).
To select by attribute name and value...
Consider the following two HTML image elements:
<img src=images/photo.jpg>
<img src=images/screenshot.jpg>
To add a specic style to the rst instance, you can use the
following syntax:
img[src=photo.jpg] {border: 2px solid #000;}
The selector will match only an image element with an attribute
of src=images/photo.jpg and no other image elements will
be selected (Figure 12).
Attribute Selectors, continued
To select by presence of multiple space separators
and hyphens...
Consider the following XHTML image elements:
<img src=images/vacation01.jpg alt=Portland
vacation photo />
<img src=images/vacation04.jpg alt=vacation photo />
<img src=images/vaction03.jpg alt=vacation photo of
Portland />
To add style to only those images that have an alt attribute (and
all your images should!), and a series of space separated words
that include Portland (note that the case must match as well)
youd use the following syntax:
img[alt~=Portland] {border: 5px solid green;}
Figure 13 shows the results.
Similarly, you can select by the presence of an attribute name
plus a hyphenated, specied word within the value. Consider
the following HTML:
<p title=nursery-rhyme>Mary, Mary, quite contrary,
how does your garden grow?</p>
<p title=song-lyric>And shes buying a Stairway to
Heaven</p>
<p title=traditional-rhyme>Roses are red, violets
are blue</p>
Add this CSS rule:
p[title|=rhyme] {color: blue;}
Both the rst and third elements will take the style, whereas the
middle one will not. (Figure 14).
Pseudo Elements
As with pseudo classes, pseudo elements are predened
elements within CSS. There are four of which to be aware, as
described in Table 4.
Figure 11. Applying style using an attribute name selector.
Figure 13. Applying a border to only the photos with multiple space
separated words where Portland appears within the images alter-
native text string.
Figure 12. Applying a border to only the photo using the complete
(name+value) attribute selector.
CAUTION: ADJACENT SIBLING SELECTORS ARE NOT
IMPLEMENTED IN INTERNET EXPLORER 6.0 OR BELOW.
Table 3. Attribute Selectors
Attribute Selector Pattern Matching Example
[name] Selects by presence of attribute
name for a given element
a[title]
{font-style: italic;}
[name+value] Selects by presence of the
attribute name plus its value
img[src=photo.jpg]
[name~=value] Selects by the attribute name
plus the presence of a specic
space separated word within the
attribute value
img[alt~=Portland]
[name|=value] Selects by the attribute name
plus the presence of a hyphenated
word within the attribute value
a[title|=top-down]

Figure 14. Applying style using pattern matching. Note however

that in the case of hyphen matching, order matters. The hyphenated
word must be rst in the string. Had we switched the third paragraphs
attribute to title="rhyme-traditional" the style should not apply.
CAUTION: ATTRIBUTE SELECTORS ARE NOT IMPLE-
MENTED IN INTERNET EXPLORER 6.0 OR BELOW.
Table 4. Pseudo Elements in CSS 2.1
Pseudo Element Purpose Example
:frst-line Selects only the rst line of text in a
given element.
blockquote:frst-line
{font-weight: bold;}
:frst-letter Selects only the rst letter of text in a
given element
p:frst-letter
{font-size: 250%}
:before Used to generate content before a
given element
q:before {content:
open-quote;}
:after Used to generate content after a
given element
q:after {content:
close-quote}


5
DZone, Inc. | www.dzone.com
Core CSS: Part II
tech facts at your fingertips
Pseudo Elements, continued
First line and letter pseudo elements
Both the :rst-line and :rst-letter pseudo elements are typically
used to add typographic features to a given set of text. The
following HTML block shows what happens in the document:
<p>Lets be honest. We all make mistakes. Sometimes
we can be too hard on ourselves, or others, for those
mistakes. It makes me remember that long ago and far
away, someone very wise said:</p>
<blockquote>To err is human, to forgive divine.</
blockquote>
<p>Having both the capacity to be forgiving of others
and the ability to forgive yourself is part of
learning how to be wise.</p>
Using the decorative pseudo elements, here are the CSS
examples from Table 4:
blockquote:frst-letter {font-size: 250%}
p:frst-line {font-weight: bold;}
Figure 15 shows the results.
Both the rst letter and line pseudo elements have good
support across browsers, including IE 6.0.
Generated Content
A fascinating if controversial portion of CSS is called generated
content. This is when, using the pseudo elements :before
and/or :after, you as the author can actually generate text,
symbols and images. Whats more, you can style them on the
page. Consider the quote from earlier:
<blockquote>To err is human, to forgive divine.</
blockquote>
Now, lets generate quote marks and style them using CSS:
blockquote {font-size: 30px; font-weight: bold;}
blockquote:before {content: open-quote; color: red;
font-size: 120px;}
blockquote:after {content: close-quote; color: red;
font-size: 120px;}
Figure 16 shows the results in Firefox.
The caveat, and the cause of misuse and therefore controversy
has to do with the fact that the content generated by pseudo
elements results in pseudo content. In practical terms, this
means the content never actually appears in the content layer,
only the presentational layer!
In a situation where the generated content is largely decorative
or practical in some sense but does not inhibit access to important
data, this is ne. Take a look at the generated source by Firefox and
youll see the quotes called for do not appear in the code at all.
But what if we were to generate the message itself? In the HTML:
<blockquote></blockquote>
And in the CSS:
blockquote:after {content: To err is human, to
forgive divine font-size: 90px;}
Figure 17 shows the generated results.
However, when we look at the source code, we see that the
generated content does not appear within the code (Figure 18).
Therefore, if you are generating important content to the desktop
screen that must be comprehensible, generated content is not the
way to go. It can cause problems for copying, printing, reading,
saving, and for anyone using Internet Explorer IE7 or earlier,
simply non-existent due to complete lack of implementation
for the :before and :after pseudo elements.
Figure 15. Using rst letter and line pseudo elements to apply style.
Notice that in the case of :rst-line, the line is dened as whatever
amount of characters make up the rst line. Because this is not always
the desired result, using min-width and max-width properties to limit
line length wherever possible can address this issue.
Figure 16. Using pseudo elements to generate and style the quote marks.

Figure 17. You can generate actual content, but it will only appear
on the presentational surface.
Figure 18. While we can visually see the generated content on the
screen, it does not appear within the actual body of the document.
Selectors can be combined, giving authors highly specic ways
of working to style and manage documents.
Grouping
Selector grouping is simply placing a number of selectors that all
share common properties separated by commas:
h1, h2, h3, h4, h5, h6, p, q, blockquote, td,
#content, .standard {color: #000; margin: 5px;}
Now all these selectors will share the declaration properties.
Combining Selector Types
As youve already seen in several of this refcards examples,
you can combine selector types in order to create what some
designers and developers refer to as complex selectors. Table 5
COMBINING SELECTORS
Hot
Tip
Grouping is useful when you have a lot of shared
features between elements. You can group those
elements as shown, and then create more specic
rules for individual elements. You might have heard
of CSS reset or normalization which uses this technique.
Core CSS: Part II
6
tech facts at your fingertips


DZone, Inc.
1251 NW Maynard
Cary, NC 27513
888.678.0399
919.678.0300
Refcardz Feedback Welcome
refcardz@dzone.com
Sponsorship Opportunities
sales@dzone.com
Copyright 2008 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical,
photocopying, or otherwise, without prior written permission of the publisher. Reference: The Zen of CSS Design, Molly E. Holzschlag and Dave Shea, Peachpit Press, February 2005.
Version 1.0
$
7
.
9
5
ISBN-13: 978-1-934238-22-6
ISBN-10: 1-934238-22-8
9 781934 238226
5 0 7 9 5

ABOUT THE AUTHOR
Proving once and for all that
standards-compliant design
does not equal dull design,
this inspiring tome uses
examples from the landmark
CSS Zen Garden site as the
foundation for discussions
on how to create beautiful,
progressive CSS-based Web sites.
RECOMMENDED BOOK
BUY NOW
books.dzone.com/books/zencss
Molly E. Holzschlag
Molly E. Holzschlag is a well-known Web standards advocate, instructor, and
author. She is an Invited Expert to the W3C, and has served as Group Lead
for the Web Standards Project (WaSP). She has written more than 30 books
covering client-side development and design for the Web. Currently, Molly
works to educate designers and developers on using Web technologies in
practical ways to create highly sustainable, maintainable, accessible, interac-
tive and beautiful Web sites for the global community. She consults with major companies and
organizations such as AOL, BBC, Microsoft, Yahoo! and many others in an effort to improve
standards support, workow, solve interoperability concerns and address the long-term
management of highly interactive, large-scale sites. A popular and colorful individual, Molly
has a particular passion for people, blogs, and the use of technology for social progress.
Web Site
http://www.molly.com
Combining Selectors, continued
shows some examples as well as the selectors denitionand to
help you practicethe selectors specicity. Read selectors from
the right of the selectorit helps!
The resources in Table 6 should help you get more information
on the topics discussed in this card.
More Core CSS Refcardz:
Core CSS: Part IIIDecember 2008
Core CSS: Part IAvailable Now!
RESOURCES
Table 6. Resources
URL Reference
http://www.w3.org/TR/CSS21/cascade.
html#specicity
Specicity in CSS 2.1 explained
http://www.w3.org/TR/REC-CSS2/cascade.
html#specicity
Specicity in CSS 2.0
http://gallery.theopalgroup.com/
selectoracle/
SelectOracle: Free online tool to help you
calculate selector specicity
http://developer.yahoo.com/yui/reset/ Yahoo! User Interface library reset
http://meyerweb.com/eric/thoughts/
2007/05/01/reset-reloaded/
Eric Meyers take on using reset or
normalization"
Table 5. Combining selectors to create highly specic rules
Combined Selector Meaning Specicity (CSS 2)
#content div.module > p Selects child paragraphs descending
from a <div> element that has a class
of module and is within the uniquely
identied portion of the document that
is identied as content
1,1,2
#main-nav ul li ol >
li:hover
Selects only the rst letter of text in a
given element
1,0,4 (CSS 2)
1,1,4 (CSS 2.1)
tr > td+td+td > table Any table element that is a child of
a table data element that is the third
sibling from a table row element.
0,0,5
#content ul > li + li
a[href=http://molly.
com/]
Any anchor with an href of http://
molly.com/ that is the second child
sibling from an unordered list element
descending from an element with an
ID of content.
1,0,4 (CSS 2)
1,1,4 (CSS 2.1)
Upcoming Refcardz: Available:
Visit refcardz.com for a complete listing of available Refcardz.
Design Patterns
Published June 2008
FREE
Get More FREE Refcardz. Visit refcardz.com now!
DZone communities deliver over 4 million pages each month to
more than 1.7 million software developers, architects and decision
makers. DZone offers something for everyone, including news,
tutorials, cheatsheets, blogs, feature articles, source code and more.
DZone is a developers dream, says PC Magazine.
Core Seam
Core CSS: Part III
Hibernate Search
Equinox
EMF
XML
JSP Expression Language
ALM Best Practices
HTML and XHTML
Essential Ruby
Essential MySQL
JUnit and EasyMock
Getting Started with MyEclipse
Spring Annotations
Core Java
Core CSS: Part II
PHP
Getting Started with JPA
JavaServer Faces
Core CSS: Part I
Struts2
Core .NET
Very First Steps in Flex
C#
Groovy
NetBeans IDE 6.1 Java Editor
RSS and Atom
GlassFish Application Server
Silverlight 2