CSS Selectors. Did You Know All of Them

Post an Article

Date: 5th Oct 2005
Author: Webmaster
Contact Author
Ranking: 9.20 (5 Votes)

When it comes to writing style sheets, many web designers only use and mostly only know about the class and id selectors or may be element selectors. But trust me there are many others. CSS2 has introduced even more selector types and although older browsers do not support some selector types, they are still worth taking a look. In this article I will explain all different types of CSS selectors along with their support on different browsers and versions. Before I can start escalating through selector types, let me make it clear that a CSS consist of one or more rules and a typical rule consists of two parts. A selector and a property (or set of properties). The selector is the part which selects the HTML tag / element to which the style is going to be applied and the property part, as clear from its name, defines how the selected element will look like.

	Body {
		background-color : grey;
	}

In the above style body is a selector, which refers to the html body element and the background-color: grey is a property that tells the browser to display a grey background for the selected element. Enough!! Now lets move back to the subject.

There are about 10 different types of selectors in CSS explained in a simple to complex order below:

1. Universal selector (CSS2)

Not supported on NN4 and almost not supported on IE 4

Universal selector applies to all elements on a page. It does not have any default value and it is defined using the asterisk :

	* {
		font-family : verdana;
	}

Using the above rule, all elements on a page will be assigned a verdana font.

2. Element selector

Supported on all browsers

The element selector is the easiest and most commonly used selector. Just pick any HTML element and assign properties to it using the rules of your choice. Here is an example:

	h2 {
		font: bold 160% arial, sans-serif, 'trebuchet ms';
		color : blue;
	}

The rule will be applied to all h2 elements on the page.

3. Class selector

Supported on all browsers (Can not have '-' when used with IE3)

Class selector can be used in two ways. A class specific to a particular HTML element or general class which can be applied to different elements. When defining a class in style sheet, the class name is preceded with a period as shown below:

	.news {
		color : red;
	}

	hr.thinblue {
		color : blue;
		size : 1px;
	}

The first style can be applied with a class attribute to any HTML element like this :

	<span class="news">

The second example shows a class, which can specifically be applied to hr elements only. The format is the same e.g. <hr class="thinblue">.

TIP: You can assign multiple classes to a single HTML element by separating them with a space. Example <p class="style1 style2">

4. ID selector

Supported on all browsers (Partially with NN4 and when used without '-' on IE3)

Ids are the unique style selectors. They are used in the same way as classes except that one ID can only be used once on a page or can only be assigned to a single element and cannot be repeated. An ID can be defined with a name in the style sheet with a '#' sign before it :

	#top {
		width : 100%;
		background : #eee;
		color : #333;
	}

and here is how to apply this style to an element :

<div id="top">

5. Pseudo-element selector (CSS2)

Not supported on IE3, NN4 and earlier versions

Pseudo means false. Both pseudo-element and pseudo-class selectors have no equivalent HTML tag or attribute. There are three pseudo-element selectors :

• First-letter
• First-line
• First-child

Different browsers interpret the first-line selector differently. The first-letter selector, as clear from its name affects the first letter of the element to which it is applied. For example:

	Span:first-letter {
		font-weight : bold;
		color : blue;
	}

The first-child selector refers to the first HTML descendant of the element to which it is applied.

6. Pseudo-class selector (CSS2)

Not supported on IE3, NN4 and earlier versions

Pseudo-class selectors work in exactly the same way as pseudo-element selectors. This selector is only used under a few special conditions. Currently CSS2 has defined the following pseudo-class selectors :

• :active
• :link
• :visited
• :hover
• :focus
• :lang()

To define a style using the pseudo class selector, use the following format :

	A:visited {
		color : red;
		text-decoraion : none;
	}

7. Descendant Selector (CSS2)

Buggy or partial support on NN4 and IE3 and earlier versions

All HTML elements except the <HTML> itself are descendants of another element. You can apply a style to an element, which is a descendant of another type of element. To understand it fully, please check the following example:

	 P span {
		font-weight : bold;

	}

This style will be applied to any span element inside a P element.

8. Parent-Child Selector (CSS2)

Not supported on any IE versions. Only supported on the latest versions of NN, Mozilla 5 and later.

Parent child selector is an enhanced form of descendant selector. In the of descendant selector, it is not necessary to have the child immediately under the parent for the style to be effective. It could be a level 2 or 3 child. But in this case the child must be an immediate child. For example :

	Body > h1 {
		font-size : 150%;
	}

This style will only apply to the h1 element coming directly under body element that is obviously the parent of h1 in the element hierarchy.

9. Adjacent Selector (CSS2)

Not supported on any IE versions. Only supported on the latest versions of NN, Mozilla 5 and later.

Adjacent selector refers to the elements next to each other. The style is applied to an element that is adjacent to another element in the document. For example take a look at the following example :

	h1+h2 {
		line-height : 1.5;
	}

This style will be applied to the h2 element only when it is found next / adjacent to the h1.

10. Attribute Selector (CSS2)

Not supported on any IE versions. Only supported on the latest versions of NN, Mozilla 5 and later.

Probably the most complex of all, the attribute selectors apply to elements that have a specific attribute or a specific value assigned to that attribute. There are three variations to this selector.

	input [type="radio"] {
		border : #333 solid 1px;
	}

Applies to all input elements of type radio.

	a [title~="laptop"] {
		border : #333 solid 1px;
	}

Applies to all anchor elements whose title attribute contains the word laptop.

Note: The attribute this style is applied to must have a value, which is separated with spaces.

	Element [attribute |= "laptop"] {
		border : #333 solid 1px;
	}

Applies to all elements with its first word being "laptop".

Note: The attribute this style is applied to must have a value that is separated with hyphens.

---

Comments

This article is purely for those who want to learn CSS. Other than you use images in your website, you may use CSS to give good looking style to your website. This will also help search engine crawling smoothly and as a result, your website ranking increases in search engines.
Posted by : Faisal Iqbal on 2005-10-07 22:37:47