Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).
In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called {selectors}, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.
The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitivity, but in XML they are case-sensitivity.
Note: The adjacent sibling selector is pretty well supported [see Quirksmode and Sitepoint] by most modern browsers. However, in Internet Explorer 7, this selector will also select inappropriate elements in your source code, such as HTML comments. Just make sure that these don’t get in the way. IE 6 does not support the adjacent sibling selector but we’ll soon be dropping support for that browser, right?!
Pseudo elements suck on to selectors much like pseudo classes, taking the form of selector:pseudoelement { property: value; }. There are four of the suckers.
First Letters {:first-letter} and First Lines {:first-line}
The {:first-letter} pseudo element applies to the first letter of an element and {:first-line} to the top line of an element. You could, for examples create drop caps and a bold {:first-line} for paragraphs like this:
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before {:before} and After {:after}
The {:before} and {:after} pseudo elements are used in conjunction with the {content:} property to place content either side of an element without touching the HTML.
The value of the {content:} property can be {content:open-quote;}, {content:close-quote;}, {content:no-open-quote;}, {content:no-close-quote;}, any string enclosed in quotation marks {content:"any-string";} or any image using {content:url("imagename");}.
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.
Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.
{:link}- is for an unvisited link.
{:visited}- is for a link to a page that has already been visited.
{:active}- is for a link when it is gains focus (for example, when it is clicked on).
{:hover}- is for a link when the cursor is held over it.
a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than {:hover}) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.
Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.