CSS Selectors

Imagine you hire some hapless painters and decorators to paint your living room. You have a lovely green colour you like. You need to tell the painters what green paint to use and which room to paint.

CSS and HTML work the same way. The HTML is the structure of the your house. The CSS is the paint to be applied. The CSS properties define the colour of the paint. But you also need to tell the CSS which room to paint. That is what parts of the HTML document to style up. CSS does this through something known as selectors or more fully CSS Selectors. These are used to target part of your HTML for the CSS to then apply its styling to.

The combination of paint to use and room to paint is known as a CSS rule.

CSS Rules

Firstly, a rule declaration is broken down as follows:

Anatomy of a CSS Rule

The selector can be a HTML element such as <h1> above. This is known as a HTML selector. The curly brackets enclose a ‘property/value’ pair. More than one 'property/value' pair can be added. These are separated by semi-colons and usually for ease of editing placed on a new line.

There a number of ways that selectors can be declared.

HTML Selectors

HTML Selectors use HTML tags to target their content. Any HTML element can be targeted. Commonly used HTML selectors include <body>, <h1>, <p>, <ul> but any can be used.


h1 {
	font-size: 16px;
	color: #000099;
	font-family: Arial, Helvetica, sans-serif;
}

codePen Demo

The body is often used as this allows the designer to set default fonts and backgrounds.


body{
	font-size: 12px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
        background-color:#ccc;
}

Class Selectors

One drawback with HTML selectors is that when applied to a page every time a particular element is called the style is applied. Imagine a scenario where you have redefined the <p> tag. Every paragraph in the HTML document will assume the style rule. For more flexibility you can use class selectors. These allow you to create a style rule that can be applied to any HTML tag.

With class rules it is up to you to give the selector a name. This should be unique and should begin with a dot (.). An example of a class selector based rule is as follows:


.maintext {
       font-size: 12px;
       color: #ff0000;
}

In the above example a class of name 'maintext' is declared.

To apply the class selector use the ‘class’ attribute that can be added to any HTML element that you want to assume the style. For example the following applies the rule ‘.maintext’ to the first paragraph but not the second paragraph.


<p class="maintext">Paragraph One</p>
<p>Paragraph Two </p>
<p class="maintext">Paragraph Three</p>

codePen Demo

This gives you more flexibility in page design as the ‘class’ attribute can be added to any tag.

ID Selectors

ID selectors are very similar to class selectors in that they can be applied to any element in a HTML file. ID selectors are flagged with a hash (#) and can be given any user-defined name as appropriate.


#footer {
	color: #0066CC;
	background-color: #CCCCCC;
	font-size: 10px;
	text-align: center;
}

To apply this ID to an element in a HTML document use the ID attribute that can be added to any tag. Add the value of the user-defined ID selector name as follows:

<div id="footer">Page Maintained by mustbebuilt.com</p>

codePen Demo

The main difference between ID and class selectors is that ID selectors are only supposed to be used once per document. They can be used on any HTML element in the document but should only appear once. In the example above a rule is declared for a section of the document that will be identified as the footer of the file and styled accordingly. The document will only have one footer. When we consider CSS positioning we will see how this ability to single out an element for styling lends itself to page layout with CSS.

Pseudo Class Selectors

Although classes are on the whole user defined, some classes are already established as part of the specification. These are known as ‘Pseudo-Classes’. The most common use of pseudo-classes is to format links targeting the <a> anchor.

The four pseudo classes associated with <a> are as follows:

a:link - the appearance of a link in its native state.
a:visited – the appearance of a link that the browser history flags as visited.
a:hover – the appearance of a link when the user’s mouse hovers over it.
a:active – the appearance of a link when clicked on.

Tip: The order you add the link pseudo-classes is important. They must be as listed above ie link, visited, hover, active. One way to remember this is “I LoVe/HAte pseudo classes!”

If rules are created using the pseudo classes as outlined above then all links will assume the rules of the class. This may not be what you want. You can use pseudo classes with regular classes to create rules that only apply to links that have had a class associated with them.

The following creates a set of rules for links that have the ‘menu’ class attached.

a.menu:link {
	color: #000066;
}
a.menu:visited {
	color: #996633;
}
a.menu:hover {
	color: #CC0000;
}
a.menu:active {
	color: #FFCCCC;
}

These rules could then be used to format links in a menu bar and other rules declared for links elsewhere in the document.

You can use pseudo classes to remove the underline from links by creating a rule with the ‘text-decoration’ property and setting it to the value ‘none’.

text-decoration: none;

Other Selectors Are Available

As well as the pseudo classes related to links outlined above there are other useful examples such as first-child and last-child.

As there is probably enough to digest already you may want to review some of the more advanced selectors that are available once you have got the hang of the main three outlined above.

... And One Last Thing

Any one selection technique is not necessarily better than another. It is horses for courses. Any decent stylesheet will make use of HTML, ID and Class selectors, and possibly some of the tricks available with more advanced techniques.

Leave a Reply

*