The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree. For example:
em {color: blue; }
This rule will select any <em> element on the page and color it blue. As you can see from the document tree diagram below, all <em> elements will be colored blue, regardless of their position in the document tree.
There are a huge range of elements that you can select using type selectors, which means you can change the appearance of any or every element on your page using only type selectors.
While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree.
For example, if you want to target the first paragraph and first list items on a page to make them stand out, you could mark up the page in the following way:
<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
The tree diagram would be:
The rule used could then be:
.big { font-size: 110%; font-weight: bold; }
If you want to be more specific, you can use class and type selectors together. Any type selectors can be used.
div.big { color: blue; }
td.big { color: yellow; }
label.big { color: green; }
form.big { color: red; }
For example, you may want to target the first paragraph and first list items on a page to give them a larger font size. You may also want only the paragraph to be bold.
To do this, you could use the following rules:
.big { font-size: 110%; } /* affects p and li */
p.big { font-weight: bold; }/* affects p only */
ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document tree. Examples of ID selectors:
#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }
The major difference is that IDs can only be applied once per page, while classes can be used as many times on a page as needed.
Descendant selectors are used to select elements that are descendants of another element in the document tree.
For example, you may wish to target a specific <em> element on the page, but not all <em> elements. A sample document could contain the following code:
<body>
<h1>Heading <em>here</em> </h1>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
</body>
The document tree diagram (with the <em> element to be targeted) would be:
If you use a type selector like the example below, you will select all <em> elements on the page:
em {color: blue; }
However, if you use a descendant selector, you can refine the <em> elements that you select. The rule below will only select <em> elements that are descendants of <p> elements. If this rule is applied, the <em> element within the <h1> will not be colored blue.
p em {color: blue; }
You can also jump levels in the document tree structure to select descendants. For example, the following code:
<body>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li><em>item 3</em></li>
</ul>
</body>
The document tree (with a third-level <em> element highlighted) would be:
Using the following rule you can isolate any <em> element inside a <ul> element, without having to describe the <li> element. If this rule is applied, any <em> element within a <ul> element will be colored blue. However, the <em> element within the <p> will not be colored blue:
ul em {color: blue; }
So far, all the selectors have been based on elements within the document tree. However, there are times when you may want to style something where there is no CSS selector available, like the state of a hyperlink (eg. active or visited).
Pseudo-classes allow you to format items that are not in the document tree. They include:
With pseudo-classes, you can style links in different ways in each of the four states.
a:link is the selector for normal links
a:visited is the selector for visited links
a:hover is the selector for hover state
a:active is the selector for active links
Due to specificity, the selector that appears later in the stylesheet will be used if there is any conflict. For this reason, link and link pseudo class selectors should always be used in the following order.
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}
All of the usual properties can be used on these four states. You can also combine states if needed, as long as the order (link and visited before hover and active) is maintained:
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
When styling the four link states you should be aware that modifying standard hyperlink behavior (such as underlines) can be confusing for some users, who may not realise that the item is a link.