CSS Selectors

Here we present an introduction/review of CSS selectors. There are several different types of selectors:

Type

Descendant

Child

Class

ID

Attribute

Universal

Selectors identify the element(s) affected by the CSS rule.

Type Selectors

Type selectors specify elements by tag name and affect every instance of that element type. Looking again at a previous example:

p {
color: darkgreen;
font-family: Verdana;
font-size: 10pt;
}

This rule specifies that the text of every <p> element should be darkgreen and use a 10-point Verdana font.

Descendant Selectors

Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that <strong> tags within <p> tags should have red text:

p strong {
color: red;
}

With descendant selectors generations can be skipped. In other words, the code above does not require that the <strong> tag is a direct child of the <p> tag.

Child Selectors

Child selectors specify a direct parent-child relationship and are indicated by placing a > sign between the two tag names:

p > strong {
color: red;
}

In this case only <strong> tags that are direct children of <p> tags are affected.

Class Selectors

In HTML, almost all elements can take the class attribute, which assigns a class name to an element. The names given to classes are arbitrary, but should be descriptive of the purpose of the class. In CSS, class selectors begin with a dot. For example, the following rule creates a class called "warning," which makes the text of all elements of that class bold and red:

If the class selector is preceded by an element name, then that selector only applies to the specified type of element. To illustrate, the following two rules indicate that h1 elements of the class "warning" will be underlined, while p elements of the class "warning" should not be:

Note that you can assign an element any number of classes simply by separating the class names with spaces like this:

Syntax

<div class="class1 class2 class3">...

ID Selectors

As with the class attribute, in HTML, almost all elements can take the id attribute, which is used to uniquely identify an element on the page. In CSS, ID selectors begin with a pound sign (#) and have arbitrary names. The following rule will indent the element with the "maintext" id 20 pixels from the left and right:

#mainText {
margin-left: 20px;
margin-right: 20px;
}
<div id="mainText">
This is the main text of the page...
</div>

Attribute Selectors

Attribute selectors specify elements that contain a specific attribute. They can also specify the value of that attribute.

The following selector affects all links with a target attribute:

a[target] {
color: red;
}

The following selector would only affect links whose target attribute is "_blank".

a[target="_blank"] {
color: red;
}

The Universal Selector

The universal selector is an asterisk (*). It matches every element.

* {
color: red;
}

Grouping

Selectors can share the same declarations by separating them with commas. The following rule will underline all i elements, all elements of the class "warning" and the element with the id of "important."