SELECTORS - CSS: Professional Techniques for Modern Layout - page 47

UNIVERSAL SELECTION
I'm going to show you the use of the asterisk symbol ( * ) in selectors. Don't get overexcited:
h is isn't as wild a card as you might think. Here's a basic example:

* { color : blue ;}

h at asterisk is called the universal selector. What that does is directly select every element in
the document and apply those styles to them.

h is looks like a wildcard, and in one way it is, because you can use it to select a whole lot of
elements without directly naming them. As an example, suppose I wanted to select all of the
elements inside this div .

< div >
< h1 > Hey-ho! </ h1 >
< p > I'm a < em > paragraph </ em > . </ p >
< ol >
< li > Uno </ li >
< li > Deux </ li >
< li > Drei </ li >
</ ol >
</ div >

49

h at's as simple as:

div * { border : 1px solid red ;}

h e result is exactly the same as if I'd written:

div h1 , div p , div em , div ol , div li { border : 1px solid red ;}

Well, almost exactly the same. h e visual result is the same, as evident in Figure 2-7, but
there's a very slight dif erence, which is in the specii city. You see, the universal selector has a
specii city contribution of 0,0,0,0. h at means that div * has specii city 0,0,0,1 and div h1
(as well as all the others in that grouped selector) has a specii city of 0,0,0,2. Other than that,
though, the results are the same.

You might be hoping that this enables you to select all of your headings with h* instead of h1 ,
h2 , h3 , h4 , h5 , h6 . Sorry, but no. It doesn't work that way. You can use it as a wildcard match
only for elements as shown before. h at's as far as it goes.