CSS Basics: Take Your Web Design to the Next Level – A Beginner's Guide to CSS Selectors

Guide to Understand CSS Selectors

You can apply CSS to HTML elements such as

• Headings
• Paragraphs
• Unordered and Ordered Lists
• Tables
• Areas

to style them visually according to your needs. A CSS Rule is always made up of two parts - the CSS Selector and the related Declaration, which is surrounded by curly brackets (braces) { and }. The declaration is composed of one or more pairs of property and value, which are separated by a colon : and terminated by a semicolon ;.

Selector {
  Property: Value;
  ⋅⋅⋅
}

In simple terms, a CSS selector is a pattern that points to one or more HTML elements on the web page. The properties in the declaration block of the CSS rule are applied to the selected HTML elements.

CSS selectors can be combined into a selector list. The comma , is used as a separator between selectors. A comma-separated list of CSS selectors corresponds to a logical OR expression. White spaces before or after the comma are allowed. For better readability, each selector can be given in a new line.

Note that for the last selector in the list, the trailing comma mustn't be given.

The most basic CSS selector is the type selector, such as H1 or P. The term element selector is often used instead of type selector. This selector selects all HTML elements of a certain type and applies the CSS style to them.

/* combined selector list */ 
h1, h2, h3 {
  /* font size for headings */
  font-size: 1.3em;

  /* text color: mediumRed */
  color:   #bb0000;
  ...
}

Simple Selectors

A simple selector is a CSS selector with a single component, such as an element type name, class, or ID, that is not used in combination with any other selector. There are several types of selectors that can be combined to restrict the selection. Simple selectors can be divided into the following categories:

• Type Selector aka Element Selector
• class Selector
• id Selector
• Universal Selector

1. Type Selector aka Element Selector

The simplest selector is the so-called type selector, which can be used to apply a style to a specific type of HTML tag. The style defined this way applies to all occurrences of the given HTML tag on the web page, e.g. H1 (1st level heading) or P (paragraph).

/* type selector */
h1 {
  /* font size for all H1 headings */
  font-size: 1.3em;

  /* text color: mediumRed */
  color:   #bb0000;
  ...
}

2. The class Selector

With the type selector, it is not possible to select only certain elements of a type.

To prevent a CSS rule from selecting all elements of a type, you can define a class for the elements you want to select. The class selector only selects HTML elements for which the corresponding class attribute is set in the opening HTML tag (e.g. <p class="bigger">).

1. In the style sheet, the class selector is the class name prefixed with a period ..

2. The class name is case sensitive. That means, capital and lower case letters are handled as different characters.

3. The class name cannot begin with a hyphen or a decimal digit.

4. Multiple classes can be assigned to an HTML element. The class names in the class attribute of the HTML tag are separated using spaces.

5. A class can be used any number of times in the HTML code.

/* define a class */
p {
  /* default font size */
  font-size: 1em;
}

.bigger {
  /* font size 25% larger than default font size */
  font-size: 1.25em;
}

<p>
This paragraph uses the default font size.
</p>
<p class="bigger">
For this paragraph, the font is enlarged.
</p>

This background       represents the screen and is not part of the sample code.

3. The id Selector

The id="…" attribute is used to assign a unique ID to an HTML element on the web page, which may only be used once in the document. Use the id selector in the style sheet to design the HTML element with CSS.

The id selector only selects the element for which the corresponding id attribute is given in the opening HTML tag (e.g. <p id="intro">).

1. In the style definition, the id selector is the id name preceded by the hash character #.

2. The id name is case sensitive. That means, capital and lower case letters are handled as different characters.

3. The id name cannot begin with a hyphen or a decimal digit.

4. The same id may only be used once in the HTML code of the web page.

5. For a single HTML element, no more than one id should be specified.

6. The id always has a higher specificity (weight) than a class.

/* define class and id */
p {
  /* default font size */
  font-size: 1.0em;
}

.essential {
  /* Font-Style: cursive */
  font-style: oblique;

  /* background: lightGreen */
  background: #90ee90;

  /* text color: mediumRed */
  color: #da1f12;
}


#essential {
  /* background: lightMagenta */
  background: #ec54f4;

  /* text color: mediumBlue */
  color: #0000cd;
}

<p id="essential" class="essential">
This paragraph is essential. The id "essential" and the class "essential" are defined for the paragraph. Which of the two definitions is used?
</p>

This background       represents the screen and is not part of the sample code.

This example demontrates:

1. If a property is defined for the id selector AND a class selector, then the definition for the id selector is applied.

2. If a property of the class selector is NOT defined for the id selector, then the definition of the class selector is applied. In this example, this affects the font-style property, which is only defined for the class selector.

4. The Universal Selector

The universal selector aka asterisk selector * is used to address all elements of an HTML page. It also selects all elements that are inside another element.

A useful and frequently use for this selector is manipulating the box model.

* {
  box-sizing: border-box;
}

This CSS rule has the effect that the visible width of an element is no longer determined by the sum of width, padding, and border as usual, but already includes these values. This makes it much easier to create flexible page elements, especially in Responsive Web Design.