TQ Toolkit - CSS - Advanced Selectors

Hide

Selectors may be combined to be a single selector.

Let's consider the following scenario:

.first {
     font-size : large;
     text-align : center;
     }

The above class selector, would style all elements assigned to the class "first". Let's say that you want to style all the paragraphs assigned to the class "first". By combining the class and type selectors, we get the following:

p.first {
     color : red;
     font-size : large;
     text-align : center;
}

Now, paragraph elements which have been assigned the class "first", will have a large font size, be centered and colored red.

TOP

Selector Grouping

Hide

p {
    color: black;
    font-family: Garamond, serif;
    }

h1 {
     color: red;
     font-family: Garamond, serif;
     }

Consider the above rules. Notice that both share a common property: "font : Garamond". Suppose that you wish to change all the text with the font Garamond to another font, say, Verdana. It would be very troublesome to change every rule with specifies the font Garamond.

You should group all the elements with the same properties into the same selector. In this case, the following rule should be inserted:

h1,p {
     font-family: Garamond, serif;
     }

This way, both elements will have the same font type. You can choose as many selectors as you want to group by delimiting them with a comma.

TOP

Pseudo-class selectors

Hide

Have you ever noticed that hyperlinks on a webpage are of a different color from the other text? When, you visit the hyperlink, you will notice that the color will change once again. This may be achieved by use of pseudo-class selectors.

Pseudo-class selectors are used to add special effects to selectors. Pseudo-class selectors are presented in the form:

selector:pseudo-class {property: value}

In HTML, hyperlinks are presented in the form:
<a href="http://www.thinkquest.org/">thinkquest</a>

By default, links are blue. However, you may choose to change the color by using a pseudo-class selector. In this case, the pseudo-class would be link.

a:link {color: #FF0000}

You may also style other pseudo classes, such as:
a:visited {color: #00FF00}
[Colour of link of sites you have visited before}

a:hover {color: #FF00FF}
[Colour of link when you cursor is over the link]

a:active {color: #0000FF}
[Colour of link when you have clicked on it]

Please note that the sequence of this rules are IMPORTANT for them to work. You can omit any of them if no changes are to be made, say, on active.

Flash Content View Flash illustration of using pseudo-class selectors

Advanced Selectors

Content Jump

Combining Selectors

Selector Grouping

Pseudo-class selectors