Selectors in CSS | Types, Examples

Selectors are the most basic components in CSS. A selector in CSS specifies an HTML element or elements to which a CSS rule is applied. In other words, a selector simply selects the HTML element(s) you want to style.

A CSS selector is a part of the statement that tells the browser what to style. The semantic HTML5 elements such as body, header, nav, main, or footer are the most common examples of selectors in the CSS.

The general syntax to write style rule in CSS for either an internal style sheet or an external style sheet is as follows:

selector {
     property1: value1;
     property2: value2;
  /* More properties and values */
}

Each CSS rule consists of a selector, followed by a declaration block. The declaration block contains one or more declarations that define the exact formatting of the style.

A declaration consists of a property and a value, separated by a colon (:) and followed by a semicolon (;). The property identifies the style to apply, such as color, background-color, border-width, or font-style. Each property is assigned with a value to apply, such as red for color property.

For example, if you want to format the content in the body section of a webpage, use the body as the selector in the style statement like this:

body {
   background-color: green;
}

In this example, an element ‘body’ is a type selector. The CSS style rules defined in the declaration block apply to the entire body of the web page. Look at the below figure.

An example of type selector in CSS.

Types of CSS Selectors in CSS


In CSS, we can divide selectors into five categories:

  • Simple selectors: Select and style elements based on their name, id, or class.
  • Combinator selectors: Select and style elements based on a specific relationship between them.
  • Pseudo-class selectors: Select and style elements based on a certain state.
  • Pseudo-elements selectors: Target and style a part of an element.
  • Attribute selectors: Select and style elements based on an attribute or attribute value.

Type Selectors (Element Selectors)


A type selector is the simplest type of selector that applies a style sheet to a specific element in a web page. Here, the type refers denotes the element name. Therefore, the type selector selects HTML elements based on the element name and it is called element selector. Let’s take an example based on the type selector.

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>Type Selector Example</title>
<style>
   p {
     color: red;
     font-size: 18px;
     line-height: 1.5;
     padding:10px;
     margin: 10px;
   }
</style>
</head>
<body>
    <p>This is the first paragraph styled with the type selector.</p>
    <p>This is the second paragraph styled with the type selector.</p>
</body>
</html>

Output:

An example of type selector which targets all p elements in the document.

In this example, p is a type selector or element selector. It will target all of <p> elements in the HTML document.

Class Selectors


A class selector targets elements that have a specific class attribute. A class attribute is used to define a related group of HTML elements on a page. The class selector matches an element based on the values of the class attribute of the element.

To select elements with a specific class attribute in the HTML document, write a period (.) character, followed by the class name. The general syntax for class selectors in CSS is as:

.classname {
     property: value;
     property: value;
  /* More properties and values */
}

In the above syntax, the period (.) indicates that you are defining a class selector. The classname specifies the name of the class you want to select. A class name cannot begin with a number.

Example 2:

<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
  .menu {
      background-color: green;
      color: white;
      font-size: 18px;
      padding: 10px;
   }
</style>
</head>
<body>
     <div class="menu">This is a menu.</div>
</body>
</html>

In this example, menu is the name of a class that targets the div element with class=”menu”.

ID Selectors


This selector allows you to select a specific element based on the id attribute. The value of the id attribute should be unique in a web page so that the id selector can select one unique element.

To select a unique element with a specific id attribute, write a hash symbol (#), followed by the id value of the element. The general syntax for id selectors in CSS is as:

#idname {
    property: value;
    property: value;
 /* More properties and values */
}

In this example, a hash symbol (#) indicates that you are defining an ID selector. The idname is the name of the ID you want to target a specific element with it. An id name cannot start with a number.

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>ID Selector Example</title>
<style>
#para1 {
    color: green;
    text-align: center;
}
</style>
</head>
<body>
    <p id="para1">Scientech Easy, Dhanbad, Jharkhand</p>
    <p>This paragraph is not affected by the above style sheet.</p>
</body>
</html>

In this example, the id selector #para1 targets a paragraph <p> element with id=”para1″. But another paragraph element will not be affected by this CSS style sheet.

CSS Universal Selector


In addition to type, class, and id selectors, CSS also provides a universal selector (*). It is the most fundamental selector in the CSS selectors that is represented by an asterisk (*). A universal selector allows you to select every element in the HTML document.

In other words, it applies styles to all tags and content within a page. However, we rarely use it because it has a wide scope. The general syntax for universal selector in CSS is as:

* {
  property: value;
  property: value;
 /* More properties and values */
}

A universal selector consists of an asterisk (*), followed by a declaration block. For example, if you want to set a margin of 0 and padding of 0 for all elements on a webpage, you would use the universal selector like this:

* {
  margin: 0;
  padding: 0;
}

In this example, asterisk (*) indicates that all elements on the page are selected.

Let’s take an example in which we will apply a common CSS style to all HTML elements on the web page using a universal selector.

Example 4:

<!DOCTYPE html>
<html>
<head>
<style>
   * {
    text-align: center;
    color: red;
   }
</style>
</head>
<body>
    <h1>CSS Tutorial by Scientech Easy</h1>
    <p>Dhanbad</p>
    <p id="para1">Jharkhand</p>
    <p>India</p>
</body>
</html>

Output:

An example of universal selector in CSS that selects all elements on webpage.

As you see that every element on the web page has been affected by the internal style sheet.

CSS Grouping Selectors


When multiple selectors appear in the same style rules, we can group them together in a single rule by providing a comma after each selector. This is called grouping selectors in CSS.

Grouping selectors allows us to apply the same styles to more than one HTML element without writing separate style rules for each one. This helps keep your CSS concise and easier to maintain.

To group selectors, list them separated by commas, followed by a single declaration block. The general syntax for grouping selectors in CSS is as follows:

selector1, selector2, selector3 {
    property: value;
    property: value;
 /* More properties and values */
}

Look at the following CSS code where h1, h2, and h3 elements have the same style definitions:

h1 {
  color: red;
  font-family: Arial;
  margin-bottom: 20px;
}
h2 {
  color: red;
  font-family: Arial;
  margin-bottom: 20px;
}
h3 {
  color: red;
  font-family: Arial;
  margin-bottom: 20px;
}

In this code, all the elements such as h1, h2, and h3 have the same style definitions, therefore, it is better to group all the selectors to minimize the code. To group selectors, separate each selector with a comma, followed by a single declaration block.

/* Grouped Selectors */
h1, h2, h3 {
    color: red;
    font-family: Arial;
    margin-bottom: 20px;
}

Example 5:

<!DOCTYPE html>
<html>
<head>
<title>CSS Grouping Selectors Example</title>
<style>
/* Grouped Selectors for headings */
h1, h2, h3 {
     color: #333;
     font-family: 'Arial, sans-serif';
     margin-bottom: 16px;
}
/* Grouped Selectors for text elements */
p, a {
   font-size: 16px;
   line-height: 1.5;
   color: red;
}
</style>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <p>This is a paragraph.</p>
    <a href="#">This is a link.</a>
</body>
</html>

In this example, we have grouped three selectors together and apply the same styles to all <h1>, <h2>, and <h3> elements. Similarly, we have grouped two selectors and apply the same style to <p> and <a> elements. We have minimized the repetition of the CSS code by grouping selectors.

Thus, grouping selectors in CSS is useful when you want to create a style and want to apply to more than one HTML element. You can list more than one selector in the same style rule.

Understanding selectors in CSS is a fundamental step to learn CSS. In this tutorial, we have explained the most simple CSS selectors with the help of various examples. Hope that you will have understood and practiced all the examples.

Please share your love