HTML and CSS Reference
In-Depth Information
Adobe's Dreamweaver or GoLive products) and who wish to learn more about the nuts and
bolts of CSS in order to free yourself from your programmatic shackles, read on.
Tip Have you ever been reviewing someone else's style sheet and found yourself wondering what that strange,
long selector actually does? Paste the selector into the SelectORacle ( http://gallery.theopalgroup.com/
selectoracle/ ) and in return you'll receive a plain-text translation in English or Spanish.
Universal “Star” Selector
Something many developers are not aware of is the universal (or “star”) selector, otherwise known
as the asterisk ( * ). This selector will match any single element in your (X)HTML document.
Note If you've been using CSS for a while and you've taken advantage of some of the IE/Win hacks on
the Web, it's likely you've seen this selector before in the Star HTML hack, covered in Chapter 6. But that use
is purely a side effect of a bug in the IE rendering engine, and this selector has practical uses beyond fooling
IE/Win.
A popular technique that uses the universal selector is setting global, default styles at the
beginning of your style sheet. To set margins and padding on all elements to zero (an approach
used by many developers when starting a project to cut down on browser-rendering weirdness),
simply use the following:
* {
margin:0;
padding:0;
}
This is certainly a handy trick to have up your sleeve. But what about some more creative
uses? Well, the universal selector allows you to target all items within a certain element:
div#header * {...}
This code selects any element contained by <div id="header"> . If you prefer, you can even
target the grandchildren of a particular element:
div#header * p {...}
This will style any p (the grandchild ) contained within any element (the child ) that is con-
tained by <div id="header"> (the parent ). This trick can be quite useful for targeting groups of
elements that have only their level of ancestry in common. And because the universal selector
can also be used more than once in a combined selector, its uses are fairly limitless. One great
example of this is Eric Meyer's Universal Child Replacement technique, which you can read
about at www.meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ .
Search WWH ::




Custom Search