In my previous post I gave you the brief tutorial on CSS and promissed to go on with it. Well, as promissed, here is some usefull info on Pseudo-classes and Pseudo-elements and Cascading Order.

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are specific “classes” and “elements” that are automatically recognized by CSS-compatible browsers. Pseudo-classes distinguish among different element types. Pseudo-elements refer to sub-parts of elements, for example the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form:

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

It’s better not specify Pseudo-classes and pseudo-elements with HTML’s CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes may be set to the A element to display links, visited links and active links differently. A visited link could be defined to render in a different color and even a different font size and style.

There can be an interesting effect – an “active” link displayed in a slightly larger font size with a different color. And when the page is re-selected the visited link can be displayed in a smaller font size with a different color. The sample style sheet looks like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

The first line of text in a newspaper article is often displayed in bold lettering and all capitals. CSS1 has this capability as a pseudo-element.
You can use a first-line pseudo-element in any block-level element (such as P, H1, etc.).
An example of a first-line pseudo-element:

P:first-line {
font-variant: small-caps;
font-weight: bold }

First Letter Pseudo-element

To create drop caps and other effects use first-letter pseudo-element.
The first letter of text in an assigned selector will be reflected according to the value assigned. A first-letter pseudo-element can be used in any block-level element.
Example:

P:first-letter { font-size: 300%; float: left }

creates a drop cap three times the normal font size.

Cascading Order

The style sheets may antagonize over control of a particular selector when there are multiple style sheets used.
There have to be rules as to which style sheet’s rule will win out in these situations. The following features will define the outcome of contradictory style sheets.

1. ! important

Rules can be prescribed as important by specifying ! important. A style that is prescribed as important will win out over contradictory styles of equal weight. In a similar fashion, as both author and reader can arrange important rules, the author’s rule will win over the reader’s in cases of importance.

A sample use of the ! important statement:

BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }

2. Origin of Rules (Author’s vs. Reader’s)

As I mentioned above, both author and reader have the ability to arrange style sheets. When rules between the two confront, the author’s rules will win over reader’s rules of otherwise equal weight. The browser’s built-in style sheets are override by both author’s and reader’s style sheets.

Authors should be careful with using ! important rules as they override the user’s ! important rules.
Any ! important rules override normal rules, so authors should better use normal rules almost entirely to ensure that users that have special style needs can read the page. For example, a user may need large font sizes or special colors due to sight problems, he should be able to declare certain style rules to be ! important.

3. Selector Rules: Calculating Specificity

Style sheets may override conflicting style sheets based on the level of specificity, a more specific style will always win over a less specific one. It is simple a calculation to figure out the specificity of a selector.
1. Count the number of ID attributes in the selector.
2. Count the number of CLASS attributes in the selector.
3. Count the number of HTML tag names in the selector.

Then write the three numbers in exact order with no spaces or commas. Now you have a three digit number. (You may have to turn the numbers to a larger base to end with three digits) The concluding list of numbers corresponding to selectors will define specificity with the higher numbers winning out over lower ones.
Here is a list of selectors sorted by specificity:

#id1         {xxx} /* a=1 b=0 c=0 –> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 –> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 –> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 –> specificity = 001 */

4. Order of Specification
When the two rules are of the same weight the last one specified wins.

Well, that was a quick and brief tutorial on CSS. Hope you found it fruitful.

Related posts:

1. Basic CSS Tutorial
2. 3 Ways of Applying Style Sheets to a Web Page
3. Introduction to CSS3
4. Firefox Plugins for Web Designers and Developers
5. Website Layout. Liquid or Fixed?