Selectors

Selectors are used to style HTML elements according to their type and/or attributes.

All markups can be selected with the * selector:

* {
/* declarations here */
}

Selecting by Type

The element selector selects HTML elements based on the element name.

Syntax

element-name {
/* declarations here */
}

The element-type must be a valid HTML element.

Example

In the following example, all <p> elements on the page will be center-aligned, with a red text color:

p {
text-align: center;
color: red;
}

Selecting by Attribute

Most commonly, the class and id attributes are assigned to elements for styling purposes. An id cannot start with a number.

Syntax

#id-name {
/* declarations here */
}
.class-name {
/* declarations here */
}
element[attribute='value'] {
/* declarations here */
}

The id of an element is unique within a page, so the id selector is used to select one unique element. An element can be selected with a specific id, by using a hash (#) character, followed by id-name.

Multiple class values can be assigned to a single element. Elements are selected by class with a period (.) character, followed by class-name. Unlike id values, class values can be duplicated on a page with different elements.

Example

The following rules select elements based on id, class, and other attributes:

#para1 {
text-align: center;
color: red;
}
.center {
text-align: center;
color: red;
}
li[title='red'] {
background-color: red;
color: #fff;
}

It can also be specified that only certain HTML elements with a given class should be styled. For example, here, only <p> tags with a class of "center" will have its text center-aligned:

p.center {
text-align: center;
color: red;
}

Video Walkthrough

Watch this video on how to compare the various selectors in CSS.

Looking to contribute?

Learn CSS on Codecademy