CSS Tutorial
CSS2.1 Selectors
The CSS2 specification was replaced by the CSS2.1 specification. CSS2.1 is not supported by IE6.
Child Selector
We've already met the descendant combinator, which is the white space between simple selectors. The child selector consists of at least two selectors and another type of combinator: the child combinator. It matches a selector that is a child of an element.
div > p {padding: 0 14px;}
This differs from a descendant selector because the P element must be a child (not any descendant) of a DIV element. Without the combinator, any number of levels could intervene between the DIV element and the P element.
Direct Adjacent Sibling Selector
The direct adjacent sibling selector, like the child selector, is a selector consisting of at least two selectors and a sibling combinator. It matches one selector with another selector that immediately precedes it when both share the same parent.
#main h1 + p::first-line {font-variant: small-caps;}
This is a useful selector if you want only the first paragraph following an H1 heading in the main section (ID) of your page to use the first-line pseudo-element. Do you remember that table example in the previous lesson where we demonstrated how to use a class within an ID? We used this example to demonstrate that by using CSS IDs one can greatly minimize classes.
table#cartTable td {text-align: center; padding: 8px 0;}
table#cartTable td.qty {text-align: left; padding-left: 6px;}
Using the direct adjacent sibling selector we can even eradicate the "qty" class in the TD element.
table#cartTable td {text-align: center; padding: 8px 0;}
table#cartTable td + td {text-align: left; padding-left: 6px;}
table#cartTable td + td + td {text-align: center; padding-left: 6px;}
The first line remains the same. The second line specifies that when two cells are adjacent siblings of the same parent then the alignment will be left. The third line resets the alignment to center by effectively saying that when three or more adjacent siblings occur together the alignment should be center. We have removed all classes from the table. Now, the truth is that this is not really good CSS. There is a still better way of achieving this, but it will have to wait until we introduce CSS 2.1 pseudo-classes.
Attribute Selector
The attribute selector may be one of the most powerful and useful selectors. It matches an attribute or attribute value in the document. Attribute selectors use square brackets that follow their selector without white space. There are four attribute selectors in CSS2.1. They are simple, attribute value, one-of-many (space-separated), and the hyphen attribute value.
selector[attribute]
selector[attribute="value"]
selector[attribute~="value"]
selector[attribute|="value"]
Simple Attribute Selector
The simple attribute selector selects an attribute of any value.
a[title] {color: #000;}
This applies the color black to all anchor tags that have a title attribute, whether that attribute is empty or not. Note: this does not display the value of the title attribute, nor apply any styles to the value. It only styles anchors that have the title attribute.
Attribute Value Selector
The second type of attribute selector matches an exact attribute value.
a[href="http://www.amazon.com"] {font-style: italic;}
input[type="checkbox"]:focus {outline: 1px solid red;}
The equals sign here is a values selector. In the former example above all anchor tags pointing to Amazon.com's homepage will be italic. Note: this will not style an href of "amazon.com", but will style any anchor tag with an exact href value of "http://www.amazon.com". In the latter example all checkboxes will have a red outline when they are in focus. (focus is a CSS2.1 pseudo-class and will be covered below.) You can also stack up this type of attribute selector to refine your match.
a[href="http://www.amazon.com"][title="Amazon.com"] {font-style: italic;}
input[type="checkbox"][checked="checked"] {outline: 1px solid red;}
In the former example an anchor tag will be italic if it has an href value of exactly "http://www.amazon.com", and a title attribute value of exactly "Amazon.com". In the latter example any selected checkbox will have a red outline. Note: this will not work if the HTML is HTML 4.0. For that version of HTML you would use the following example as a model.
input[type="checkbox"][checked] {outline: 1px solid red;}
"One-of many" Attribute Value Selector
The third type of attribute selector, having the values selector "~", matches a space-separated list of words, one of which exactly matches the value.
a[title~="copyright"] {font-style: italic;}
In this example an anchor tag will be italic if any one of the space-separated values of its title attribute is "copyright", as in this example.
<a href="#" title="Here is the copyright">link</a>
Hyphen Attribute Value Selector
The last attribute selector, having the values selector "|", applies when the attribute value is hyphen-separated. The match always refers to the beginning of the attribute value before the hyphen. This is primarily used with the CSS 2.1 pseudo-class selector lang.
*[lang|="en"] {color: red;}
In this example all elements with a language attribute beginning with "en" will be red. This is useful because there are several versions of the English "lang" type: en-US, en-UK, en-CAN. The lang pseudo-class will be covered in more detail below under CSS2.1 pseudo-classes.
Finer Points of the Attribute Selector
Now we are going to delve into some finer points of class use with attribute selectors. First, let us re-consider a simple class declaration. The dot declaration applies to all elements which call that class. In fact, the dot is a shorthand notation for "~=", that is, a string that contains that space-delimited value. Thus the following three entries do the same thing, though only the first is conventional.
.pastoral
*.pastoral
*[class~="pastoral"]
The second example above makes use of the universal selector, while the third example uses an attribute selector. Classnames should not begin with numerals, nor contain spaces, nor start with non-alpha characters, though hyphens are fine. InterCaps are recommended. Some older browsers will render classes that start with numerals, and thus some developers have used such classes as hacks. While this practice is not advised, you should be aware of it. Some older browsers do not support underscores in class names.
If you are very astute you might be wondering whether you can use the CSS attribute selector with the HTML class attribute. And if so, would there any difference between this method and calling a class the usual way? For example, the following two examples would seem to do the same thing.
.cartHeader {color: red;}
*[class="cartHeader"] {color: red;}
Generally speaking they do the same thing. There is, however, one subtle difference. In the latter example you are indicating that the "cartHeader" class should be applied only if used alone. As you should recall, if two or more classes are called into an HTML tag, they can all potentially act upon the element. However, using the attribute selector and a single HTML class attribute precludes this, as in the following example.
CSS:
.bold {font-weight: bold;}
p[class="yellow"] {color: yellow;}
HTML:
<p class="bold yellow">Some text</p>
In the example above only the "bold" class will be applied because the "yellow" class declaration is exclusive. The conclusion that we can draw is that all classes are inclusive by nature unless specifically made exclusive. If you have grasped that we will tackle another fine point. We showed earlier that a style can be specified by two conjoined classes as in the third declaration below.
.blue {color: blue;}
.yellow {color: yellow;}
.blue.yellow {color: green;}
As you may recall, the two classes above work both alone and together. And if they are used together, the color green (specified in the third line) will be applied to the element because it has a higher specificity. Let's try different combinations of class-calling and see what results we get. For these examples, I am using Mozilla Firefox. All examples use the following HTML.
<p class="blue yellow">Some text</p>
.blue {color: blue;}
*[class="yellow"] {color: yellow;}
.blue.[class="yellow"] {color: green;}
result: blue text
.blue {color: blue;}
.yellow {color: yellow;}
.blue.[class="yellow"] {color: green;}
result: yellow text
.blue {color: blue;}
*[class="yellow"] {color: yellow;}
.blue.yellow {color: green;}
result: green text
The first CSS test will render blue text because we have explicitly stated that the "yellow" class can only be used exclusively. In effect, only the "blue" class is being called.
The second CSS test results in yellow text because the "yellow" class follows the "blue" class in the CSS, and thus has greater weight. However, since the "yellow" class is designated exclusively in the third line, it cannot conjoin with another class, and so the conjoined classes are not called. The third line serves no function.
In the third CSS test the rendered text is green because even though we have specified that the "yellow" class should only render yellow text if used alone, we have turned around and specified that the conjoining of the "blue" and "yellow" classes is allowed. Thus, the second line of the last example is really superfluous and should be re-written as a dotted class.
Unfortunately, as we have stated elsewhere, IE6 will only apply the styles to the last class of a conjoined definition. Thus, in the following example, IE will apply green to the "yellow" class, not to the combination of the both classes.
.blue.yellow {color: green;}
When we introduce CSS3 combinators below, you will be introduced to some more very powerful uses of the attribute selector.