Simple selectors

Introduction

Simple selectors allow you to target HTML elements directly, as well as targeting elements that contain class or ID attributes.

Type selector (CSS1)

The type selector is written using an element type.

/* syntax */
E { }

/* example */
h1 { }

How does it work?

The type selector targets every instance of the element type regardless of their position in the document tree.

In HTML 4.01, there were 91 different HTML elements that could be targetted for styling.

In HTML 5, there are now 118 different elements that can be targetted for styling.

In the following example, the p selector targets any instance of the <p> element.

/* CSS selector */
p { }

<!-- HTML markup -->
<p></p>
<div></div>
<p></p>

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The type selector is well supported across all modern browsers.

Exercise 1: Write some type selectors

Open this HTML file in an editor:
exercises-start/exercise-205-01-01.html

Write a CSS rule to set the <h1> element to color: blueviolet.

Write a CSS rule to set the <b> element to color: chocolate.

Write a CSS rule to set the <em> element to color: cornflowerblue.

Write a CSS rule to set the <blockquote> element to color: darkcyan.

/* Add styles here */
h1 { color: blueviolet; }
b { color: chocolate; }
em { color: cornflowerblue; }
blockquote { color: darkcyan; }

Check your work against the finished HTML file:
exercises-finished/exercise-205-01-01.html

Class selector (CSS1)

The class selector is written using an optional element, followed by a ".", followed by the class name.

/* syntax */
.class-name { }
E.class-name { }

/* example */
.intro { }

Whitespace is not permitted within the selector.

/* Valid */
.class-name { }

/* Invalid */
. class-name { }

Class values are case-sensitive. In the following example, browsers interpret .intro and .Intro as different classes.

/* case sensitive classes */
.Intro { }
.intro { }

Classes can begin with letters, digits, hyphens and underscores. They can also include colons and periods.

/* class names */
.active { }
.480wide { }
.-members { }
._classname { }

However, if class values start with a number or a special character, they must be escaped when writing CSS selectors.

/* escaped number */
.\34 80wide { }

<!-- HTML markup -->
<div class="480wide"></div>

How does it work?

The class selector targets any HTML element that has the relevant class value.

In the following example, the .intro selector targets any element that contains a class of intro.

/* CSS selector */
.intro { }

<!-- HTML markup -->
<p class="intro"></p>
<div class="intro"></div>

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The class selector is well supported across all modern browsers.

Adding elements

Elements can be added before the "." to make a selector more specific.

/* CSS selectors */
div.intro { }
p.intro { }

In the following example, the p.intro selector targets only <p> elements that contain a class of intro. The <div> with a class of intro is not targeted.

/* CSS selector */
p.intro { }

<!-- HTML markup -->
<div class="intro"></div>
<p class="intro"></p>

Stringing classes together

Classes can be added together to make a selector more specific. The joined class selectors cannot contain whitespace.

/* CSS selector */
.one.two { }

In the following example, the .one.two selector targets any element that has both class attribute values of one and two.

/* CSS selector */
.one.two { }

<!-- HTML markup -->
<p class="one"></p>
<p class="one two"></p>
<p class="two"></p>

The class attribute values within the HTML document can be written in any order. The value one two is the same as two one.

/* CSS selector */
.one.two { }

<!-- HTML markup -->
<p class="one two"></p>
<p class="two one"></p>

Multiple classes can also be written in any order within the CSS. The selector .one.two is the same as .two.one.

/* CSS selector */
.two.one { }

<!-- HTML markup -->
<p class="one two"></p>

Support

Multiple class selectors are not supported by Internet Explorer 6.

Exercise 2: Write some class selectors

Open this HTML file in an editor:
exercises-start/exercise-205-01-02.html

Write a CSS rule to style the class of intro with a color of steelblue.

Write another CSS rule to target only <p> elements with a class of intro. Set the color to violet.

/* Add styles here */
.intro {
  color: steelblue;
}

p.intro {
  color: violet;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-01-02.html

ID selector (CSS1)

The ID selector is written using an optional element, followed by a "#", followed by the ID name.

/* syntax */
#id-name { }
E#id-name { }

/* example */
#sidebar { }

Whitespace is not permitted within the selector.

/* Valid */
#id-name { }

/* Invalid */
# id-name { }

ID names are case-sensitive. In the following example, browsers will interpret #nav and #Nav as different IDs.

/* Case sensitive */
#nav { }
#Nav { }

Before HTML 5, ID attribute values had to begin with a letter.

In HTML 5, ID attribute values are allowed to have any characters or strings, as long as the value is unique and does not contain whitespace.

/* ID names */
#active { }
#480wide { }
#-members { }
#_classname { }

However, if ID values start with a number or a special character, these characters or numbers must be escaped.

/* escaped number */
#\34 80wide { }

<!-- HTML markup -->
<div id="480wide"></div>

How does it work?

The ID selector targets any HTML element that has the relevant ID value.

In the following example, the #nav selector targets any instance of an element that contains an ID of nav.

/* CSS selector */
#nav { }

<!-- HTML markup -->
<p id="nav"></p>

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The ID selector is well supported across all modern browsers.

Exercise 3: Write some ID selectors

Open this HTML file in an editor:
exercises-start/exercise-205-01-03.html

Write a CSS rule to style the element with an ID of title with color: darkviolet.

Then write another CSS rule to style the element with an ID of pullout with color: deeppink.

/* Add styles here */
#title {
  color: darkviolet;
}

#pullout {
  color: deeppink;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-01-03.html

Universal selector (CSS2)

The universal selector is written using a "*".

/* syntax */
* { }

How does it work?

The universal selector targets all elements within the document.

In the following example, the universal selector targets every element in the document.

/* CSS selector */
* { }

<!-- HTML markup -->
<body>
  <div></div>
</body>

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The universal selector is well supported across all modern browsers.

Exercise 4: Write the universal selector

Open this HTML file in an editor:
exercises-start/exercise-205-01-04.html

Write a CSS rule to style all elements in the document using the universal selector. Use color: darkmagenta.

/* Add styles here */
* {
  color: darkmagenta;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-01-04.html