CSS Selectors (In Detail)

This is the third article I have written on CSS, following The Basics of CSS and Inserting CSS into Your Documents. I introduced the idea of selectors in the first article, in brief, to let you have an overall picture of CSS. Now I'll take a closer look at selectors.

A selector is the bit of a CSS definition that says what the styles are applied to. There are many things that you can do with selectors. There are three different types of elements that you can apply selectors to, you can apply styles based on where the element is located in the document, and you can (in some cases) apply styles based on the state of the element.

Three Elements That CSS Selectors Can Be Applied To

There are three types of element that a CSS selector can be applied to:

• HTML Elements, such as <P> tags, <IMG> tags etc.
• Elements with a specific class, for example an element with the class "mystyle" (<P CLASS="mystyle">)
• Elements with a specific ID, for example an element with the ID "myparagraph" (<P ID="myparagraph">)

The selectors are essentially the same, they appear in the same place in the CSS document, no matter what type of element they are referencing.

For HTML elements, as described in The Basics of CSS, the selector is just the HTML code for the tag, without the < & >:

This would apply the style to all of the IMG HTML elements, images. This is essentially the same method for the other three elements. For referencing a specific class of element the class-name is preceded by a full-stop:

This style would be applied to all of the elements with the "myclass" style. For elements with a specific ID the ID in the selector is preceded by a hash mark:

This would apply the style to all the elements with the ID "myid".

Nested Selectors

Nested selectors are powerful. Nesting is a concept in HTML where one element is 'nested' within another element. For example bold text is nested within a paragraph, and italic text may be nested within the bold text. You can nest CSS selectors so you can apply a style to an element based on where it appears in the document. This means you can make, for example, all bold text in paragraphs with the class "mystyle" to be red:

This, as stated above would make all bold text within paragraphs with the class "mystyle" red. To use the selector of an element with a specific class you put the class selector directly after the element selector, with no space. To define the style for an element nested within the other you leave a space between the element selectors:

You can create complex CSS definitions to make your pages' have a very definite style.

Multiple Selectors

You can easily make several elements share the same style definitions, for example if you wanted all the different headings to share the same style the selectors would be in a comma separated list:

This means you can share styles across similar elements rather than define them all individually. Later on in the document though you can redefine parts of an element. This means that you can set attributes of the headings at the start of the CSS document, then later on change the style of just the H3 tag in a separate definition. These styles all cascade through to the document.

Pseudo Selectors

Pseudo selectors are selectors that apply style to an element based on the state, or context of the element. Examples of this are link states (unused, visited, active) and first lines and letters. The selector has a colon after it with the state before the definition. An example of this is the CSS definition for changing the colours of link colours:

This is the code for changing the colour of links, all unvisited links are blue, once they have been visited they are green, when they are active they are gold. Some browser also supports the "hover" pseudo class which is applied when the mouse is moved over the element:

This changes the link colour to red when the mouse is moved over it.