Professional SharePoint® 2010 Branding and User Interface Design

182

❘

CHAPTER 7 CASCADING STYLE SHEETS IN SHAREPOINT

<span id=”span3”>and, finally, here is my third level</span>

</div>

In this example, the bold text demonstrates how to set up an adjacent sibling selector relationship

for situations when one

span element follows another span element in the same parent container.

If you were to load this example in your browser, you would see that only

#span3 includes the red

color font because it is the only

span element that follows another span element in the same parent

container (

#span1 follows a div and #span2 does not have the same parent as the other span ele-

ments — it is a child of

#span1).

Attribute Selector

Attribute selectors are interesting in that they enable you to select elements based on what a particu-

lar attribute of that element is set to. For example, if you want to select all elements on a page that

have their

lang attribute set to “en-us”, you could do that by using an attribute selector. These can

be matched in four different ways:

SYNTAX DESCRIPTION

[att]

Matches any element with this particular attribute (att) being set. For example,

*[id] would select any element on the page that had the ID attribute set to

something.

[att=val]

Matches any element that has its attribute (att) set exactly to the value (val) pro-

vided. For example, if you wanted to identify any elements with an ID of

header,

you could set up your selector ...