#25

CONTENTS INCLUDE:
Element Selectors

Core CSS: Part 11

•

•
1D Selectors
•
Descendent Selectors
•
Attribute Selectors
Combining Selectors
G et Mo re Re fcard z! Visit
•

•
Hot Tips and more... By Molly E. Holzschlag

Element Selectors, continued

ALL ABOUT SELECTORS

Just in case you’ve not read Core CSS: Part I, 1’ll briefly
re fca rd z.co m

review the purpose of a CSS selector. A selector in a style sheet

signals the browser to find matches within those markup
(HTML, XHTML, XML) documents to which the style sheet is
related.
There are more than a few se le cto rs available for use (Ta b le
1), but even intermediate and advanced CSS authors don’t
always have an opportunity to use some of them, largely due to Figure 1. An HTML document tree showing that each of the h2s in the
cross- browser support issues for a given selector. Core CSS: document has been selected.
Part II will cover CSS 2.0/2.1 selectors. Where a selector is
unavailable in contemporary Web browsers, a caution will be Class Selectors
provided to alert you to any support concerns. Class selectors are extremely useful selectors that allow
Version Date
authors
to add a class attribute to a given element in the markup, with
Element Se le cts by matching e le me nt
a
Class Se le cts by matching class custom value. Then using that value preceded by a dot, write a
name corresponding rule using the class name.
ID Se le cts by matching id name
An example of an element with an added class attribute in
Pseudo Class Se le cts by matching
p re d e fine d pseudo class the
w w w.d zo ne .co m

Descendent Se le cts by descend ant markup document would be:

e le me nts
(also known as “contextual”) <p c l a s s = ” w a r n i n g ” > A n y p a r a g r a p h i n any document on
Child Se le cts by first-level (child ) any p a g e c o n t a i n i n g t h i s c l a s s w i l l h a v e t h e c l a s s
e le me nts r u l e s a p p l y. < / p >
Adjacent Sibling Se le cts by matching sibling
e le me nt 1n the CSS:
Attribute Se le cts by matching attrib ute
nam es and value s
.warning {color: red; font-weight: bold;}
elements with the class attribute named “warning”.
Pseudo Elements Se le cts by matching Figure 2 shows how this class, as written, will apply to both
p re d e fine d pseudo e le me nt

Table 1. CSS Selectors Covered in this Refcard

To assist in visualizing how these selectors actually match,
for
each Hot
exampleused will see
you’ll selectan
every singlethe
element, element within a
corresponding
CSS,
and a document tree that visualizes what is selected within a
sample document. Also provided are some use examples.

There’s also a universal selector, *, which when Fig ure 2. Se le cting all e le me nts with a class of warning.

Tip
document. It’s used in several hacks,
→
Get More Refcardz
including the infamous “star html” hack, (They’re free!)
Co re CSS: Part II

which is prob- • Authoritative content

lematic and invalid. While the universal selector is important to •
Designed for developers
know about, it’s probably not going to be something you use • Written by top experts
too often in real-world scenarios. • Latest tools & technologies
• Hot tips & examples
Element Selectors • Bonus content online
Element selectors, also referred to as “type” selectors, select by
matching elements. They are very broad in scope. For example,
• New issue every 1-2 weeks
if 1 have a million documents with many more millions of h2
elements within them, by using an element selector 1 can single Subscribe Now for FREE!
handedly apply styles to all of those h2 elements using one Refcardz.com
rule. Element selectors are supported in all CSS browsers and
are very widely used for these reasons.
DZone, Inc. | www.dzone.com
Here’s a CSS rule using an element selector:
 2
tech facts at your
Core CSS: Part 11
fingertips

Class Selectors, continued ID Selectors, continued

You can limit a class to a specific element by

Hot
Tip 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-conflicting styles that exist for the element p will also be
sorted and included. Figure 3. Using 1D selectors to identify the content area. The id
name can only be used once per document, but many times within a
Multi-Classing site.
An interesting and occasionally useful technique is multi-classing.
This means using more than one class to get the style you’re Hot While
to suit ID and
your Classit’s
needs, names are in fact
considered customized
best practice
after. A good use scenario would be a portal site in which you
Tip to
have multiple modules that have common colors and features, or avoid presentational names such as
# s i d e b a r . What happens when the boss
but require different background images. Consider the following
. redfont
style rules:
. modul e 1 { wi dt h: 200px ; ma r g i n: 5px ; bor de r : fonts, but now
says “update allthe
themarkup
red fontsdocuments
on the siteare littered
to be with
blue?” Easy
1px s ol i d bl ue ; }
enough to change the style in moments and update all those
. we a t h e r { b a c k g rou n d- i m a g e : u r l ( i m a g e s / ” s u ns h i n e . j p g ” ) ; }
tive (referred to as semantic naming) and where possible,
c l a s s = " r e d f o n t " when the actual visual result is blue!
To multiclass, 1’d simply add both classes to the module element,
with each name separated by a space: To avoid confusion of this nature, use naming that is
<d iv c la ss=”modu le1 wea th er ”> . . . </ div >
descrip-
The element will now pick up the styles of both classes. Typically, consider creating conventions to be used site-wide.
use of 2-3 class names can be helpful within context, but it’s not Pseudo class selectors are written with a colon followed by
a practice 1’d recommend using without a strong sense of your
site hierarchy and management.
Pseudo Class Selectors
A pseudo class selector is a set of predefined class-like
1t’s also important to point out that the source order of the class given result. 1t’s likely you’ve used pseudo classes as much
selectors.
names in the markup document is of no consequence. However,
if there are conflicts between the classes, sort order and specificity integral
the to stylingpseudo
predefined links (Table
class 2).
name. Pseudo classes can
rules in CSS will calculate which rule takes precedence. then
be attached to a variety of elements in order to achieve a
been visited
Avoid underscores and other special characters
as
: v i selement, 1D, and
Selects linksclass selectors,
that have been afor
: v i sai tnumber
e d ( c o l o rof
: vthem
i o l e t ; } are
Hot in class and ID names. The best
ited

practice currently mouse passes over.

Tip is to use hyphenation: nav-main (not
Selector Purpo se Example
:link S e le cts links that have not
focus oar:al ni ng ke ; }{ c o l o r : b l u e ; }
nav_main).
Also, while camelCasing is extremely visited
useful to coders, it can add a layer of extra testing :hover italic;}
because CSS requires case-matching, so case within S e le cts an e le me nt as
the a:hover
the markup documents and any associated CSS must {color: #ccc;}
match for rules to apply.
:focus
S e le cts the e le me nt
ID Selectors that has
“dynamic
a:focus
{ b a c k g r o u n dpseudo
- c o l o r : classes” because along with presentation
1D selectors are meant to identify a discrete
portion of a looks
:active
for navigation, assisting with usability, and styling form
document. This means an 1D name can be used S e le cts a link that is
b e ing a:active
exactly one {color: red ;}
time in a given document. This is why 1D’s are activated
particularly useful :first-child S e le cts
an e le me nt’s first child
in CSS layout when identifying significant div:first-child
portions of the {font-style:

document, such as “content” “nav” or “site- :lang S e le cts

info”— because by matching h u m a n
they are unique, discrete pieces of the document h t ml : l a n g ( d e ) { f o n t -
s i z e : 80%;}
structure. language
Assuming only one document, here’s a right/wrong Child selectors are created by combining a parent element
Table 2. Pseudo
comparison:
Class Selectors
Right:
Note that
<div id=”content”> . . . </div> :hover, :focus →
<div id=”su b-content”> . . . </div> and : a c t i v e are all
DZone, In c. | www.dzone.com
referred to as
Wrong:
 3
tech facts at your
Core CSS: Part 11
fingertips

Child Selectors, continued Descendent Selectors, continued

to reduce the use of class attributes, which help make The differences is that not only the l i children of the u l will
managing
be
sites all the more easy. Consider Figure 5.
styled, but all l i descendants of that u l and the o l will get
the
same style as well since all list items descend from the original
unordered list (Figure 8).

Figure 5. An unordered list element (parent) with three list item

child elements.

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;} parent element, in this case, nested unordered lists. Note that the
list
Now all the children of any ul will have 0 border, margin and Fig ure 8. D escendent se le ctors se le ct all descend ents of the
padding. Because in this example, the ul has an 1D, we can
use d e fine d item that is child to the ordered list e le me nt will also receive
that to limit this rule only to that discrete document element:
the style ,
ul#nav > li {border: 0; margin 0; padding: 0;} for it too is a descendent of the original parent list.
Not only has this limited the rule to the ul with an id of “nav”, As with child selectors, we can create strings to reach a
but it has also made the rule more specific both literally and particular
technically. Also, you’ll note that there’s no white space which is the child of the ordered list item element in the
element
tree within the tree:
surrounding the combinator in the first example, whereas in the
ul#nav li ul li ol li {list-style-type: decimal-
second, there is. Either way is acceptable according to the
leading-zero;}
spec. current CSS browsers including 1E 6.0 and later.
The selector will now select the very last list item in Figure
You can use as many children within the selector as is required. 8,
1n a scenario such as Figure 6, you could write a very
specific
hierarchy. None of the other list items will take on this rule.
selector to select only the children of the nested ordered list
item and style it with a leading zero decimal. Fortunately, Descendent selectors are widely supported in

Adjacent Sibling Selectors

An Adjacent Sibling selector allows you to select an element
based
on its nearest sibling element. Consider the following markup:
< d iv >
<h 1 >Mai n Content Heade r</ h 1>
< p > F i r s t sibling
Adjacent p a r a g selector,
r a p h < / pwe
> can do this quite easily without
<p> Sec ond parag raph </ p>
<p>Th ird paragraph </p>
Fig ure 6. Tree d e p icting a n ested ordered list within a n ested < / d iv >
unor- d e re d list with a parent unordered list. Using Child se le ctors,
we can se le ct children by following their ance stral p ath.
1t’s a common design theme to style a first paragraph
somewhat
The resulting CSS would be: differently using a larger font, or emphasized font, bringing
ul#nav > li > ul > li > ol > li {list-style- the reader’s eye to the critical introductory material. Using an
type:
decimal-leading-zero;} using a class attribute on the first paragraph. The combinator
for the Adjacent sibling selector is the plus sign, +.
CAUTION: CHILD SELECTORS ARE NOT IMPLEMENTED
h1+p { f o n t - w e i g h t : b o l d ; }
IN INTERNET EXPLORER 6.0 OR BELOW.
This selects the first adjacent paragraph element (Figure 9),
Descendent Selectors with no change to any of the other siblings.
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 first
did when examining child selectors (Figure 7). Figure 9. Selecting a sibling using Adjacent sibling selectors.

You can use multiple sibling elements to reach a given

sibling. Let’s say you wanted to select not the first but the
third paragraph in the example and have it display as
italic.
The syntax would be: →
Figure 7. Children are also descendents.
h1+p+p+p {font-style: italic;}
DZone, In c.
1f 1 wanted to set a style for any descendent list items within | www.dzone.com
an Figure 10 shows the selection.
 4
tech facts at your
Core CSS: Part 11
fingertips

Adjacent Sibling Selectors, continued Attribute Selectors, continued

To select by presence of multiple space separators
CAUTION: ADJACENT SIBLING SELECTORS ARE NOT
IMPLEMENTED IN INTERNET EXPLORER 6.0 OR BELOW. and hyphens...
Consider the following XHTML image elements:
Attribute Selectors <img s r c = ” i m a g e s / v a c a t i o n 0 1 . j p g ” a l t = ” P o r t l a n d
Attribute selectors are a curious piece of selectors because va c a t i o n p h o t o” / >
they really are more akin to programmatic pattern matching <i mg s rc =“ ima ge s /vac a ti on 04. j p g” a l t= ” va c at i on
than presentational design needs. There are four Attribute ph ot o” / >
selectors that are available in CSS 2.1 (Table 3). <img s r c = ” i m a g e s / v a c t i o n 0 3 . j p g ” a l t = ” v a c a t i o n
photo of
Attribute Selector Patte rn Matching Example
Portland” />
[name] Selects by presence of attribute a[title]
name for a given element {fon t-style: i t a l i c ; } To add style to only those images that have an alt attribute
[ n ame+ valu e] S e le cts by presence of the img[src=”photo.jpg”] (and
attribute name plus its value
all your images should!), and a series of space separated words
[ n ame~ =”value”] Selects by the attribute name i m g [ alt ~ =” Po rt lan d ”]
plus the presence of a specific
that include “Portland” (note that the case must match as well)
space separated word within the you’d use the following syntax:
attribute value
i m g [ a l t ~ = ” P o r t l a n d ” ] { b o r d e r : 5px s o l i d g r e e n ; }
[n ame|=”value”] S elects by the attribute name
a[ti tle| =”top-d own”] Figure 13 shows the results.
plus the presence of a hyphenated
word within the attribute value

Table 3. Attribute Selectors

To select by attribute name...

Compare the following two links:
<a h r e f = h t t p : / / m o l l y. c o m / ” t i t l e = ” g o t o M o l l y ’ s Web Figure 13. Applying a border to only the photos with multiple
s i t e ” > M o l l y. C o m , I n c . < / a > space separated words where “Portland” appears within the image’s
alter- native text string.
<a h r e f = ” h t t p : / / m o l l y. c o m / ’ > M o l l y. C o m , I n c . < / a >
Similarly, you can select by the presence of an attribute
1n the first link, there’s a title attribute. Using the following
name
CSS:
plus does
how a hyphenated,
your gardenspecified word within the
grow?</p> value.
a[title] {font-style: italic;} Consider
We can style any anchor elements with a title attribute present, the following HTML:
but the style will not apply where no title attribute is present <p t i t l e = ” n u r s e r y - r h y m e ” > M a r y, M a r y, q u i t e c o n t r a r y,
(Figure 11).
<p t i t l e = ” s o n g - l y r i c ” > A n d s h e ’ s b u y i n g a S t a i r w a y t o
Heaven</p>
<p t i t l e = ” t r a d i t i o n a l - r h y m e ” > R o s e s a r e r e d , v i o l e t s
are blue </p>
middle one will not. (Figure 14).
Figure 11. Applying style using an attribute name selector. Add this CSS rule:
p[title|=”rhyme”] {color: blue;}
To select by attribute name and value...
Consider the following two HTML image elements: Both the first and third elements will take the style, whereas
the
<img s r c = ” i m a g e s / p h o t o . j p g ” >
<img s r c = ” i m a g e s / s c r e e n s h o t . j p g ” >
To add a specific style to the first instance, you can use that in the case of hyphen matching, order matters. The
the hyphenated
following syntax: attribute to t i t l e = " r h y m e - t r a d i t i o n a l " the style should not apply.

i m g [ s r c = ” p h o t o . j p g ” ] { b o r d e r : 2px s o l i d # 0 0 0 ; }
The selector will match only an image element with an Figure 14. Applying
MENTED style using
IN INTERNET pattern matching.
EXPLORER Note however
6.0 OR BELOW.
attribute
word must be first in the string. Had we switched the third
of s r c = ” i m a g e s / p h o t o . j p g ” and no other image elements will paragraph’s
be selected (Figure 12).

CAUTION: ATTRIBUTE SELECTORS ARE NOT IMPLE-

Pseudo Elements
As with pseudo classes, pseudo elements are predefined
elements within CSS. There are four of which to be aware,
as
described in Table 4.
Pseudo Element Purpo se Example
:first-line S elects only the first line of text in a blockquote:first-
line
given element. {font-weight:
bold;}
Figure 12. Applying a border to only the photo using the DZone, In c.
complete | www.dzone.com
:first-letter S e le cts only the first letter of text in a p:first-letter
(name+value) attribute selector.
 5
tech facts at your
Core CSS: Part 11
fingertips

Pseudo Elements, continued 1n a situation where the generated content is largely decorative
or practical in some sense but does not inhibit access to important
First line and letter pseudo elements
Both the :first-line and :first-letter pseudo elements are typically data, this is fine. Take a look at the generated source by Firefox
and see the quotes called for do not appear in the code at all.
you’ll
used to add typographic features to a given set of text. The
following HTML block shows what happens in the document: But what if we were to generate the message itself? 1n the
HTML:
<p>Le t ’ s be hone s t . We a l l ma ke mi s t a ke s . Some t i mes
we can be t oo h ard on our s e l ve s , o r ot he r s , f or < b l o c kq u o t e > < / b l oc k q u o t e >
t hos e mi s t a ke s . I t ma ke s me r eme mbe r t ha t l ong ago And in the CSS:
and f ar a way, s ome one v e ry wi s e s a i d: </ p>
b
f ol or gc k
i vqeu od ti ev :ianfet ”e rf o{ nc ot -nstieznet:: “9To
0 p ex r; }r i s h u m a n , t o
<bl oc kquot e >To e r r i s huma n, t o f or gi ve di vi ne. </
bl oc kqu ot e >
Figure 17 shows the generated results.
<p>Ha vi ng bot h t he c a pac i t y t o be f or gi vi ng of
ot her s and t he a bi l i t y t o f or gi ve your s el f i s pa r t
of l e ar ni ng how t o be wi s e. </p>
Using the decorative pseudo elements, here are the CSS
examples from Table 4:
blockquote:first-letter {font-size: 250%} Figure 17. You can generate actual content, but it will only
p:first-line {font-weight: bold;} appear on the presentational surface.
Figure 15 shows the results. However, when we look at the source code, we see that the
generated content does not appear within the code (Figure 18).

Fig ure 15. Using first letter and line p s e u d o e le me nts to apply style .
No tice that in the case of :first-line, the “line” is d e fine d as wha te ve r
am ount of characters make up the first line. Because this is not
a lways the d e sire d result, using min-width and max-width p ro p e rtie s
to lim it line le ng th wherever p o ssib le can add ress this issue .

Both the first letter and line pseudo elements have Figure 18. While we can visually see the generated content on
good the screen, it does not appear within the actual body of the
support across browsers, including 1E 6.0. document.

Generated Content The

wayrefore,
to go. if
1tyou
can are g ene
cause rating imp
problems forortant content
copying, to thereading,
printing,
de sktop screen that must be compre he nsible , generated
A fascinating if controversial portion of CSS is called
content is not the
generated simply non-existent due to complete lack of implementation
content. This is when, using the pseudo elements : b e f o r e saving, and for anyone using 1nternet Explorer 1E7 or
and/or : a f t e r , you as the author can actually generate text, earlier,
symbols and images. What’s more, you can style them on the
page. Consider the quote from earlier: for the : b e f o r e and : a f t e r pseudo elements.
< b l o c k q u o t e > To e r r i s h u m a n , t o f o r g i v e d i v i n e . < /
blockquote> of working to style and manage documents.
COMBINING SELECTORS
Now, let’s generate quote marks and style them using CSS:
Selector
Selectorsgrouping is simply placing
can be combined, giving a number of selectors that
blockquote {font-size: 30px; font-weight: bold;}
all
authors highly specific ways
blockquote: before {content: open-quote ; color : red;
font-size: 120px;}
#content, .standard {color: #000; margin: 5px;}
blockquote:after {content: close-quote; color: red; Grouping
font-size: 120px;}
Figure 16 shows the results in Firefox. share common properties
separated by commas:
Hot
h 1 , h 2 , h 3 , features
h 4 , h 5 ,between
h 6 , p , elements.
q, You can group those
blockquote, td,

of “CSS
Now reset”
all these or “normalization”
selectors will share which uses this technique.
the declaration properties.
Figure 16. Using pseudo elements to generate and style the quote
marks.
Grouping is useful
The caveat, and the cause of misuse and therefore controversy
when you have a lot of
has to do with the fact that the content generated by pseudo
shared
elements results in pseudo content. 1n practical terms, this →
means the content never actually appears in the content layer,
DZone, Inc.
Tip
www.dzone.com
elements as shown, and then create more
only the presentational layer! |
specific rules for individual elements. You
 6
tech facts at your
Core CSS: Part 11
fingertips

Combining Selectors, continued

RESOURCES
shows some examples as well as the selectors definition—and to
help you practice—the selector’s specificity. Read selectors
from the right of the selector—it helps! The resources in Table 6 should help you get more information
on the topics discussed in this card.
Combined Selector Meaning Specificity (CSS
2) URL Re fe re nce
#c ont ent di v. modul e > p Selects child paragraphs descending 1,1,2 http://www.w3.org/TR/CSS21/cascade. Specificity in CSS 2.1 e xp laine d
from a <div> element that has a class html#specificity
of “module” and is within the uniquely http://www.w3.org/TR/REC-CSS2/cascade. Specificity in CSS 2.0
identified portion of the document that html#specificity
is identified as “content”
http://gallery.theopalgroup.com/ Se le ctO racle : Free online tool
#mai n- nav ul l i ol > Se le cts only the first letter of text in to help you
a 1,0,4 ( CS S 2) selectoracle/ calculate se le ctor sp e cificity
l i : hover given e le me nt http://developer.yahoo.com/yui/reset/ Yahoo! User 1nte rface library re se t
1,1,4 ( CS S 2.1)
2007/05/01/reset-reloaded/
http://meyerweb.com/eric/thoughts/ “normalization"
Eric Me ye r’s take on using reset or
t r > t d+t d+t d > t abl e Any table element that is a child of
0,0,5
a table data element that is the third Table 6. Resources
sibling from a table row element.
#c ont ent ul > l i + l i Any anchor with an href of http :// 1,0,4 ( C S S 2 ) More Core CSS Refcardz:
a[ hr ef =”http://molly. molly.com/ that is the second child 1,1,4 (CS S 2.1)
c om/ ” ] sibling from an unordered list element Core CSS: Part 111—December 2008
descending from an element with an Core CSS: Part 1—Available Now!
1D of content.

Table 5. Combining selectors to

create highly specific rules
AB OUT THE AUTHOR RECOM M ENDED BOOK
Molly E. Holzschlag Proving once and for all that
M olly E. Holzschlag is a well-known Web standards advocate, standards-compliant design
author instructor, and
does not equal dull design,
for . She is an 1nvited Expert to the W3C, and has served as Group Lead
this inspiring tome uses
coveri the Web Standards Project (WaSP). She has written more than 30
books
ng client-side development and design for the Web. Currently, Molly examples from the landmark
works to educate designers and developers on using Web technologies in CSS Zen Garden site as the
p ractical ways to create highly sustainable, maintainable, accessible, foundation for discussions
tive interac- eb sites for the global community. She consults with major
organizations suchW
and beautiful as AOL, BBC,
companies andMicrosoft, Yahoo! and many others in an effort to improve on how to create beautiful,
standards support, workflow, solve interoperability concerns and address the long-term
progressive CSS-based Web sites.
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.
BUY NOW
Web Site books.dzone
http://www.molly.com .com/ books/
zencss
Get More FREE Refcardz. Visit refcardz.com now!
Upcoming Refcardz: Available:
Core Seam Essential Ruby Core CSS: Part 1
Essential MySQL Struts2 FREE
Core CSS: Part 111
JUnit and EasyMock Core .NET
Hibernate Search
Getting Started with MyEclipse Very First Steps in Flex
Equinox Spring Annotations C#

EMF Core Java Groovy

Core CSS: Part 11 NetBeans 1DE 6.1 Java Editor
XML RSS and Atom
PHP
JSP Expression Language Getting Started with JPA GlassFish Application Server
ALM Best Practices JavaServer Faces Silverlight 2
Design Patterns
HTML and XHTML Visit refcardz.com for a complete listing of available Refcardz. Published June 2008

DZone, Inc.
1251 NW Maynard
ISBN-13: 978-1-934238-22-6
Cary, NC 27513
ISBN-10: 1-934238-22-8
50795
888.678.0399
DZone communities deliver over 4 million pages each month to 919.678.0300
more than 1.7 million software developers, architects and decision Refcardz Feedback Welcome
makers. DZone offers something for everyone, including news, refcardz@dzone.com
$7.95

tutorials, cheatsheets, blogs, feature articles, source code and Sponsorship Opportunities 9 781934 238226
more. “DZone is a developer’s dream,” says PC Magazine. sales@dzone.com

Copyright © 2008 DZone, 1nc. 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, Version 1.0
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.