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.

<html>
 <head>
 </head>
 <body>
   <div class="main">
     <h2>Welcome to Educative!</h2>
     <p>This is an example for the Class Selector.</p>
   </div>
 </body>
</html>

codemirror

# 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.

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

<html>
 <head>
 </head>
 <body>
   <div>
     <p>Welcome to Educative!</p>
   </div>
   <p>This is an example for the Type Selector.</p>
 </body>
</html>

# 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*. 

#topic {
  background-color: yellow;
}

#example {
  color: blue;
}

<html>
 <head>
 </head>
 <body>
   <div class="main">
     <h3>Welcome to Educative!</h3>
     <p id="topic">We are studying CSS selectors</p>
     <p id="example">This is for id example</p>
   </div>
 </body>
</html>

# 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.

* {
  background-color: yellow;
}

/* Turns all the elements inside the "div" element to coral */
div * {
  background-color: coral;
}

<html>
 <head>
 </head>
 <body>
   <div class="main">
     <h3>Welcome to Educative!</h3>
     <p>Here is an example for the Universal Selector.</p>
   </div>
 </body>
</html>

What are CSS selectors?

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: 