untitled

(John Hannent) #1

To make everyelement that uses an onSaleattribute bold, use the *symbol.
Here’s how to create that kind of attribute selector:


*[onSale] {font-weight: bold;}

You can also select for multiple attributes merely by separating them with a
space.


table[border][width] {property/value}

The following table would match this selector because it does have both
border and width attributes:


<table border=0 cellpadding=0 cellspacing=0 width=100%>

Matching attribute selection types ...................................................

This attribute selection technique isn’t used frequently, but it can be valuable
when you need to match language values, such as frto match French. For
example, here’s a selector that specifies a blue color for any langattribute
beginning with (or equal to) fr. This colors French text blue:


*[lang|=”fr”] {color: blue;}

Then, in the HTML, only one of the following elements turns blue:


<p lang=”fr”>Pouvez vous prospérer</p>
<p lang=”en-us”>May you prosper</p>

You guessed it: The first one is fr, so it’s a match and becomes blue.


Matching partial attribute values ......................................................

Class names (or values if you prefer) can have more than one word, such as


<p class=”running headline”>

What if you want to match all elements with a class attribute that includes
the word running? You can use a kind of wildcard matching against only part
of a class name. Write this kind of selector:


p[class~=”running”] {color: blue;}

The wiggly tilde (~) means, “Match if this word appears,” regardless of what
other words might, or might not, be there.


Chapter 3: Up and Running with Selectors 53

Free download pdf