CSS Selector Tutorials

Selectors specify the HTML element or elements to apply CSS rules to. Selectors tell web browsers what to format.

The types of selectors are: universal, type, descendant, direct child, class, id, attribute.

This is the first of two video CSS selectors tutorial.

This is the second of two video CSS selector tutorial.

Universal Selectors

The universal selector is an asterisk (*). When used by itself, the universal selector tells the web browser to apply the CSS rule(s) to every element in an HTML document, including form input fields and tables.

* { margin:10px; padding:5px; }

The CSS rule above would apply a margin of 10 pixels (margin:10px;) and a padding of 5 pixels (padding:5px;) to every element within that HTML document.

NOTE: universal selectors are supported in all major web browsers.

Type Selectors

Type selectors specify HTML elements by tag name and apply the CSS rules to every instance of that element type.

p { margin:10px; padding:0; }

The CSS rule above would apply the styles ({ margin:10px; padding:0; }) to every instance of the paragraph element (p) within the HTML document.

Class Selectors

Class selectors allow you to apply to HTML elements that have the same class selector name. A dot (.) defines a class name selector in the style sheet and the CSS rules will be applied to the HTML elements with the corresponding class name attribute.

Class selector names can contain letters, numbers, hyphens (-) and underscores (_), however, class selector names should begin with a letter, can not begin with a number and should contain only lowercase letters.

The syntax for a class selector is:

.class_name { property:value; property:value; }

The code below is an example of an HTML document with a class selector applied to elements within the document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> .red { color:red; font-size:20px; } </style> </head> <body> <h1> This is some text. </h1> <h1 class="red"> This is some text. </h1> <p class="red"> This is some text. </p> <p> This is some text. </p> </body> </html>

In the HTML document above, the CSS rules of the class selector .red are applied to all HTML elements with the .red class name.

The code above would create a web page that looks like the one below.

universal selector

ID Selectors

The CSS ID selector is used to specify CSS rules to a single, unique element within an HTML document. The pound sign (#) defines an ID selector name, followed by the name itself. The HTML element to which the style will be applied to must have an id attribute.

ID selector names can contain letters, numbers, hyphens (-) and underscores (_), however, class selector names should begin with a letter, can not begin with a number and should contain only lowercase letters.

The CSS rule below will be applied to the HTML element with id="yellow".

.yellow { color:yellow; font-size:24px; }

Descendant Selectors

CSS descendant selectors apply styles based on whether one element is a descendant of another element in an HTML document. The hierarchy of your HTML is used to define which element styles will be applied to.

In CSS, an element that is a descendant of another is a child, grandchild or great grandchild of another, etc. This is referred to as moving down the ancestral tree. And vice versa, going up the ancestral tree, elements would be a parent, grand parent, great grand parent, etc. This is referred to as moving up the tree.

Take a look at the HTML code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> </style> </head> <body> <h1> level 1 heading </h1> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

In the HTML document above, there is a level 1 heading (<h1>) and 2 paragraphs (<p>). They are all considered a child of the body element (<body>) and the body element is considered a parent of the level 1 heading and both paragraphs. The body element is the ancestor and the level 1 heading and the paragraphs are considered descendants.

The syntax to apply styles to descendant selectors is:

ancestor descendant { property:value; }

The CSS rule below applies styles to the paragraphs in the HTML document above using descendant selectors.

body p { color:red; font-size:24px; }

Descendant selectors do not have to be applied to direct child selectors, they can be applied to a grandchild, great grandchild, etc. For example, take a look at the CSS rule below.

body span { font-weight:bold; }

The style above would apply to any span element within the HTML document. It does not have to be a direct child of the <body> element.

Direct Child Selectors

Direct child selectors operate similar to descendant selectors, the difference is that direct child selectors apply only to immediate child elements.

Take a look at the HTML code below.

<body> <p> This is some content in the paragraph. This is some more <span>content</span> in the paragraph. </p> </body>

In the HTML code above, the <span> element is a direct child of the <p> element but not of the <body> element. To style a child element using a direct child selector, add a greater than symbol (>) following the parent selector, followed by the child selector and follow it with the declaration block. The syntax is:

parent > child { property:value; }

If you wanted to style the <span> element in the HTML code above with a bold font-weight, the syntax would be:

p > span { font-weight:bold; }

Attribute Selectors

Attribute selectors are used to apply style sheet declarations based on the presence of a attribute or attribute value of an HTML element.

The syntax for attribute selectors are shown below.

selector [attribute] { property:value; }

selector [attribute="value"] { property:value; }

Grouping Selectors

You can group multiple selectors together in a single rule by placing a comma (,) after each selector. The CSS styles apply to all of the selectors in that CSS rule.

The syntax of how to group selectors is shown below.

selector, selector, selector { property:value; }

Take a look at the CSS rule below.

h1, h2, h3, p, table { margin:10px; padding:5px; }

The CSS rule above would apply the styles within the declaration to all <h1>, <h2>, <h3>, <p> and <table> elements within the HTML document.