Trusted answers to developer questions

What are CSS selectors?

Get Started With Data Science

Learn the fundamentals of Data Science with this free course. Future-proof your career by adding Data Science skills to your toolkit — or prepare to land a job in AI, Machine Learning, or Data Analysis.

In CSS, selectors are used to select the element(s) you want to style.

There are numerous selector patterns and combinations that you can make of which some of the basic ones are explained below:

Class selector

The .class selector selects and styles all elements within the class that is specified.

Syntax

.class-name {
/* CSS code written here */
}

Example

In the example below, the background color of all elements in the .main class changes to coral as specified in the CSS file.

Type Selector

The type selector selects and styles all elements with the specified element name.

Syntax

element {
/* CSS code written here */
}

Example

In the example below, the font color of all the <p> elements changes to red and all of them are aligned in the center.

ID Selector

The #id selector selects and styles the element with the specified id.

Syntax

#idname {
/* CSS code written here */
}

Example

In the example below, one of the <p> element changes its background color and the other changes its font color to blue as styled under their specific ids.

Universal Selector

The Universal * selector selects all the elements and styles them. It can also select all elements inside another element. The syntax and example is as follows:

Syntax

/* Selects all the elements */
* {
/* CSS code written here*/
}

Example

In the example below, the background color of all elements changes to yellow and the background color of all elements inside the <div> element changes to coral.

RELATED TAGS

css
selector
selectors
html
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?