Pseudo-Class Selectors and Pseudo-Element Selectors

These kind of selectors allow that styles are applied to pieces of a document, based on something else than the structure of the document. The styles are based on circumstances that can not be predicted in advance. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source.

Let's take a look at the "Pseudo-Class selector".

Pseudo classes are similar to classes, but instead of representing the value of the CLASS attribute of a few elements, they represent a special characteristic of that element.

Let's take the anchors in a document: they can refer to pages you have already visited, but they can also refer to pages you haven't visited. The state of that anchor is the pseudo-class. The selector that uses that state is then called the pseudo-class selector. CSS has quite a few of these types of selectors but i'll give here the most well known: the link pseudo-class selector ( the others can be found in the specifications).

A link has 4 states: link, visited, hover, active and therefore 4 pseudo-classes. "Link" refers to any anchor which is a hyperlink and that points to an address that has not been visited. "Visited" refers to any anchor that is an hyperlink to an already visited page. "Hover" is when the mouse pointer is hovering over the anchor. "Active" is any anchor that is in the process of being activated( e.g. clicked).

A:link {color: blue;} /* unvisited links are blue */

A:visited {color: red;} /* visited links are red */

A:hover {color: yellow;} /* links turn yellow upon hovering */

A:active {color: maroon;} /* links turn maroon when clicked */

In order for this to work, you must use this rule set in the exact order as shown: link, visited, hover, active. An easy way to remember this by is : LoVe HAte.

As you can see, the A element is separated from the pseudo-class by a colon. That colon is the calling card of a pseudo-class or pseudo-element.

One thing to remember about the :hover pseudo-class is that this applies to all anchors, not only to hyperlinks. The other pseudo-classes are constraint to A elements in the HTML code. So if you want to be sure that only your hyperlinks will be yellow upon hovering, you need to change the rule into this :

A:link:hover {color: yellow;}.

Now, let's examine the "Pseudo-Element Selector".

Just like the Pseudo-Class Selector, there are quite a few pseudo-element selectors. The ones that are mostly known are called ":first-letter" and ":first-line".
You can check out the others here.

:first-letter applies styles to the first letter of a block-level element such as a paragraph while :first-line does the same to the... first line of a block-level element.

Consider the following rule:

P:first-letter {color: blue;}

This rule will cause the first letter of each paragraph to be colored blue. If you replace the :first-letter with :first-line, the first line of each paragraph will be colored blue.

The reason :first-letter and :first-line are referred to as pseudo-element selectors is because they cause a momentarily element to appear in the HTML.

Confused? This will make things clear: our rule to make the first line of a paragraph to be blue will be used by the browser to display that line in blue. The HTML "should" look like this:

<P><P:first-line>The first line will be in blue but the other lines of this paragraph will not be in blue.</P>

But when you look closely at the HTML code, you will see that the <P:first-line> will not appear in the code. It's a tag, constructed by the browser "on the fly" and used to apply the style. So, it's an element that's not a real element, hence the 'pseudo'.

Contextual Selectors

These type of selectors will let you create rules that apply in certain structural circumstances, and only in those circumstances. An example will make it clear: suppose you want to set EM text to be blue, only if the EM text is inside a P element. The rule you need is this one:

P EM {color: blue;}

This will make only text blue in an EM element if that EM element is found in a P element.

The selectors must be separated by a space and there must be at least two selectors.

As i already mentioned, CSS has more selectors you can use but not all of them are supported by most browsers. But you can read up on them here.

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.

Friends

People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

The W3C Logo

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

The Creative Commons Licence logo