Grouping Styles and Selectors

• Each rule can include multiple styles by simply separating them by semicolons:

• • h2 { color: darkblue; font-style: italic;}

• Additionally, multiple selectors that have the same styles can be grouped by separating them with commas:

• • h1, h2, h3 { color: darkblue; font-style: italic;}

• Contextual selectors allow you to specify that something will change, but only when it is used in conjunction with something else. With the following style, strong will be displayed in red, but only when it occurs within li within ul.

• • ul li strong { color: red;}

• Elements being modified by contextual selectors need not appear immediately inside one another (using this style, blah would still be red text: <ul><ol><li><strong> blah </strong></li></ol></ul>).

• Direct child selectors allow you to specify that something will change, but only those that are immediately inside of another element. With the following style, only those strong elements that are directly inside of an h1 will be purple; no strong tags deeper within the sheet will be purple.

• • h1 > strong { color: purple;}

• Adjacent selectors allow you to specify that something will change, but only when preceded by something else. With the following style, only those links (a) that are preceded by an h2 will be green.

• • h2 + a { color: green;}

• Elements being modified by adjacent selectors appear immediately after one another. Using this style, this link would be green: <h2>Visit Stanford!</h2><a href="http://www.stanford.edu">click here</a>. This link would not: <h2>Visit Stanford! <a href="http://www.stanford.edu">click here</a></h2>.

• You can also group selectors by attribute. With the following style, centered h2 tags (<h2 align="center">) will be surrounded by a dotted border:

• • h2[align="center"] { border: dotted;}