Using Style Sheets
Review the W3C CSS standard recommendation.An element's attributes can also be used in selector patterns. These are listed in the table below, again with some links to examples.
Attribute Selector Patterns | |||
---|---|---|---|
Pattern | Description | ||
E[attr] | Attribute selector, matches any element E that has attribute attr, regardless of its value. | ||
E[attr="value"] | Attribute selector, matches any element E that has attribute attr set to the specified value. | ||
E[attr~="value"] | Attribute selector, some element attributes may have multiple values, separated by spaces. This pattern matches any element with attribute attr containing the specified value in its list. | ||
E.value | Class selector, for HTML pages only. Matches any element that has the specified value in its CLASS attribute. Equivalent to E[class~="value"]. | ||
E#value | ID selector, matches the element with the given ID. For HTML this is equivalent to E[id="value"]. |
The universal selector can be used in place of a tag name in these patterns as well. For example, with
*.highlight { background-color: #ffff00 } *#mainTitle { font-size: 150%; font-weight: bold; }
the first rule matches any element with class="highlight"
set
while the second matches the element with id="mainTitle"
set. In
many cases, the '*' can be omitted,
.highlight { background-color: #ffff00 } #mainTitle { font-size: 150%; font-weight: bold; }
which is often seen in practice. These examples bring up a point regarding class selectors vs. ID selectors.
Class vs. ID
The ID attribute of an HTML tag is intended solely to provide a unique identifier. The CLASS attribute, however, was specifically designed to allow authors to assign styles to elements.
Strictly speaking, no two elements within a document (web page) can have the same ID. Anytime you add an ID attribute to a tag, its value should be different from that of any other element's ID on the page, even if they have different tag names. So a style rule with an ID selector can, at most, only apply to a single element on a page.
So why not just use an inline style instead of an ID selector in a style sheet? Well, you'll probably find it more convenient to keep all your style definitions in one place, rather than scattered throughout the document. And, if the style sheet is external, it can be shared by multiple pages.
h1#mainTitle
instead of #mainTitle
) the tag name and
ID must match the element in order for the style to be applied.
The class selector, on the other hand, can be applied to several elements on a page. You can even make rules using the same class name with different tag names. As an example, given the following,
h3.warning { color: red; } p.warning { color: gray; } ... <h3 class="warning">Danger</h3> <p class="warning">Proceed with caution!</p>
the text within the H3 element would be red but the text within the P element would be gray.
Multiple Classes
A tag can be assigned more than one class by specifying a list of class names separated by spaces in its STYLE attribute. Consider this code,
.warning { color: red } .highlight { background-color: yellow } ... <h3 class="warning highlight">Danger</h3> <p class="highlight">An important point.</p>
The H3 element would appear as red text on a yellow background because both classes are applied. On the P element however, only the background color is affected.
This points out another difference between the CLASS and ID attributes: while an element can be assigned several classes, it can have only one ID value.
Pseudo-classes and Pseudo-elements
The last set of selectors to be covered involve pseudo-classes and pseudo-elements. These allow styles to be applied to certain elements under special conditions or to certain parts of an element's content.
Pseudo-class and Pseudo-element Selectors | |||
---|---|---|---|
Pattern | Description | ||
E:first-child | Pseudo-class, matches the element E if E is the first child of its parent. Similar to * > E but would only match the first child of an element. | ||
E:first-letter E:first-line |
Pseudo-elements, applies a style to the first letter or line of content in element E, rather than the entire content. | ||
E:before E:after |
Pseudo-elements, these can be used to insert generated content before and/or after element E's content. | ||
E:link E:visited |
Link pseudo-classes, these apply to links depending on their state. | ||
E:active E:hover E:focus |
Dynamic pseudo-classes, applies to links or form elements in response to user actions. |
The :first-letter
and :first-line
selectors are
called pseudo-elements because they are not applied to the entire element but
rather to a portion of its content.
The :before
and :after
pseudo-elements allow you
to prepend or append generated content to an element's existing
content. This can include character strings and counters. Information on
generated content can be found in the standards recommendation.
The link pseudo-classes should be familiar, they relate to the old
LINK="color" and VLINK="color" attributes for the HTML BODY tag.
Likewise, the dynamic pseudo-class :active
corresponds to the old
ALINK="color" BODY tag attribute. These were originally designed to
visually distinguish links by color for the user's benefit and the feature has
been adopted into CSS.
:hover
rule for links after any
:visited
rule in a style sheet to make the hover effect work on
visited links. The reason for this has to do with the order of precedence used
for applying style rules which is discussed further on.
The other dynamic pseudo-classes allow dynamic style changes to certain elements in response to user actions such as mousing over links or selecting a form field to allow input to be entered.
Language Selectors
Not covered here are selectors based on language, E[lang|="cc"] and E:lang(cc), which can be useful for displaying foreign text and punctuation in a document. Information on these and other language-related features can be found in the standards recommendation.
Chaining Selectors
Many of the selector patterns can be combined to make a rule more specific. For example, with these rules:
div p a.definition { color: green } div p a.definition:hover { color: red }
the first would apply only to links with class="definition"
that are contained within a P element that is itself contained within a DIV
element, making them green. The second rule would change the color of those
same links to red when moused over.