Contextual Selectors

"Contextual selectors" in CSS allow you to specify different styles for different parts of your document. You can assign styles directly to specific HTML tags, or you can create independent classes and assign them to tags in the HTML. Either approach lets you mix and match styles.

(All the links open the CSS file associated with this page.)

Examples

This is a chunk of text styled with a <p> tag. It contains a hyperlink with styles defined for the <p> tag in the CSS file attached to this document.

You can also create an independent class with different style specification and assign it to <p> tags. This chunk of text is contained within a <p> tag assigned the class "copy," which specifies another set of styles for its hyperlinks.. Notice that this <p> tag has a different style from the basic <p> tag we defined for the whole document.

If you define independent classes as we do for "copy" here, you can use the <span> tag to insert text styled with another class (and other style specifications) within a chunk of text contained by a different tag/class.

Note

You'll come across solutions that use "ID" instead of "class"; remember that classes can be used many times throughout a page, while IDs should be used only once to define a unique portion of the document, such as "top_header" or "bottom_menu." IDs come in handy for Dynamic HTML, in which JavaScript accesses and manipulates specific portions of a web page.