Skip to main content

A Beginner's Guide to CSS | Part Two - The Selectors

Submitted by helen on Saturday, March 6, 2010 - 19:57; Modified on Thursday, August 18, 2016 - 11:11

In Part One - Laying the foundations, we learnt that CSS stands for Cascading Stylesheets and is used to control the appearance of a web page. We also learnt where to put our CSS. So, how do we tell CSS what we want to style? Simple. We use CSS to target certain elements, using one or more selectors.

What is a selector and how is it used?

When you want to style something, you tell CSS which element or elements to target using the appropriate selector or combinations of selectors. CSS then searches your (X)HTML markup for the element that matches the selector in question — known as subjects of that selector — to which it applies your styles.

As discussed in Part One, the selector goes at the beginning of a rule or rule-set, before the curly brace.

Let's look at an example.

Say I want to make the font in all of my paragraphs blue, I would write the following:


p {
  color:blue;
}

In the above example rule, I'm using something called the type selector to target all of the paragraphs on my page, which are represented by the p element. CSS scans the page, finds every occurrence of p and makes it blue, as per my declaration.

The CSS selectors

Here is a list of the CSS Selectors:

The ID Selector

The ID selector targets an element based on its ID, which is denoted by the (X)HTML ID attribute. Given the whole idea of an ID is to be a unique entity and multiple items are not allowed to have the same ID, the ID selector is useful for styling your layout elements — your container, your header, your content, your footer, etc.

The ID selector is denoted by the hash # followed by an identifier. In CSS, we would write the following to style a div with an ID of colOne:


#colOne {
	border:4px dashed #048cc5;
}

(Don't worry, we haven't touched on the div element yet, but we will in Part Fourteen - Layout in CSS.)

The Class Selector

The class selector is applied to an element using the (X)HTML class attribute and is used to style elements based on their function within a web page — not what the element is or looks like.

We create classes in CSS by prefixing them with a dot.


.active {
	background-color:#a9e9b5;
	font-weight:bold;
}

When creating a class, it is important to think "what is the purpose of this class?" not "what will the styles for this class look like?/what do I want my element to look like?". For instance, don't give the items in your menu a class of blue-link just because you have picked some lovely blue colours for their background and borders; don't give your image a class of pretty-picture because it looks pretty. You're better off giving the element you have used for your menu an ID and styling the links based off that, which we shall see how to accomplish below. Your pretty picture should be given a more descriptive class, based on its intended purpose. If it's a thumbnail, give it a class of thumbnail or thumb. If it's an image of the cover of a brochure, call its class brochureCover, brochure-cover or brochure_cover (whatever your preferred naming convention may be).

The Type Selector

The type selector is used to target a specific element and can save you time when writing CSS, as it can apply styles to all the elements that are within a specific element. For instance, using the menu example above, supposing you want to style the links in your menu, you could target every link within your menu as follows by applying styles to the anchor tag (the link tag) within each list-item:

(X)HTML Example:


<ul id="mainNavigation">
    <li><a href="#" title="Link One">Link One</a></li>
    <li><a href="#" title="Link Two">Link Link Two</a></li>
    <li><a href="#" title="Link Three">Link Three</a></li>
</ul>

CSS Code:


#mainNavigation a {
    border:3px solid #1b6888;
    background-color:#368aad;
    font:90% Verdana;
    color:#c4e3f0;
}

Result:

In this example, we are not only making use of the type selector, when targeting our anchor tags, we're also using the ID selector and the descendant selector.

The Descendant Selector

The descendant selector is used to target elements that are within elements, as in the example above, where we used the type selector to target the links in our menu (all of the a elements inside our #mainNavigation). If we hadn't used the descendant selector and used the type selector by itself directly on the anchor tag, this would have targeted every anchor tag on our website, which would not have been desirable.


a {
    border:3px solid #1b6888;
    background-color:#368aad;
    font:90% Verdana;
    color:#c4e3f0;
}

This would apply our styles to every link on the page. This is actually quite essential for web design. When creating stylesheets, you would typically have specific styles for your general links that would be applied by targeting the a element alone, but this does not suit the purpose of our above example, which is to only style the links in our menu.

Here is an example using the descendant selector to target all of the links within a div called #container and make them bold:


#container a {
	font-weight:bold;
}

This rule will only target the links within our div with an ID of container and not any other links on the page.

The Adjacent Sibling Selector

The adjacent sibling selector is now pretty well supported and performs quite a neat function: it allows you to target an element that is next to another element. For instance, suppose you have an image in a blog, which has a class of .blogImage, directly followed by a block of text. You want the first paragraph of this block of text to be italicised, so you would write:


img + p {
	font-style:italic;
}

The Attribute Selector

The attribute selector is another selector that is now fairly widely supported. The attribute selector will style an element based on its attribute. Let's look at an example. Supposing your external links are denoted by target="_blank" (which they should be, if you're using HTML5) and you want them to be coloured dark blue, you would write the following CSS:


a[target=_blank] {
	color:#261ca9;
}

The Child Selector

The child selector targets an element that is a direct child of another element. Supposing you have a div containing an h1 and the h1 contains a span. The h1 would be the direct descendant of the div and the span would be the direct descendant of the h1, but the span would not be the direct descendant of the div, because it is inside the h1. Let's look at an example:

(X)HTML Example:


<h2>A second level heading</h2>
<p>A paragraph.</p>
<div>
	<h2><span>Another</span> second level heading</h2>
</div>

CSS Code:


h2 {
	font:120% Verdana;
	color:#c3b02f;
}

div > h2 {
	font-weight:bold;
	border-bottom:4px dashed #c3742f;
}

Result:

A second level heading

A paragraph.

Another second level heading

This rule-set will target only the h2 inside the div, not the h2 outside of the div and not the span tag. If you wanted to target the h2, you could use the type selector or, alternatively, apply an ID and use the the ID selector or apply a class and use the the class selector.

For a definition of a child element and the general structure of the elements on a page, visit A Beginner's Guide to CSS | Part Five - The Document Tree.

The Universal Selector

The universal selector, denoted by the *, is used to target any element. When used by itself, it will match every single element, regardless of what that element is but, crucially, it is also used with the attribute selector, the class selector and the ID selector. When used with these selectors, you don't see the *; it is omitted. What does that mean? Well, the attribute selector, the class selector and the ID selector all operate using the universal selector; their functionality comes directly from the universal selector. When you are using those selectors, you are making use of the universal selector's functionality.

As an example, when you write, say, .myClass, CSS interprets this as *.myClass and harnesses the universal selector's functionality in matching all elements with the class myClass. So you're using it, without realising.


* {
	padding:0;
	font:1.5em Arial;
}

The above CSS will assign to every element where the above rule-set is present, a padding of 0 and a Arial font in 1.5ems.

For more information on the CSS selectors, visit the W3C Selector Page.

Conclusion

In conclusion, we use selectors to target (X)HTML elements that we wish to style. There are lots of selectors, some of which will become second-nature to you, and others you may not use all that often. It's really down to personal preference how you use them, and you'll start to develop your own style, over time, but a word of advice: don't go over the top with classes. If you have a list of links and you wish to style each link, there's no need to write a class called .navLink for each of your navigation links. Instead, you can use the descendant selector in conjunction with the type selector, as such:


#nav a {
	...
}

The descendant selector and the type selector will save you a lot of coding!

And that's the end of A Beginner's Guide to CSS Part Two. In Part Three how to apply CSS, we will be talking about how to apply CSS to your elements.

Revision Notes

June 23rd 2016

March 4th 2016

Updated the descriptions and examples.

May 31st 2013

  • Rewrote a lot of this tutorial, as it could have been expressed in a clearer fashion.
  • Added intro to selectors and their functionality.
  • Expanded universal selector section.