Selectors in CSS

Post Views: 387

Here we will get to know more about selectors in CSS. These are the patterns that will match the elements associated with the styling rules. The selectors are the most crucial feature of CSS in styling the text and formatting the elements in a specific way. The selectors are categorized into a few types which we will be discussed below.

Universal selector:

This selector is denoted as *(asterisk), which takes up all the elements present for the styling. This is generally used for testing purposes while removing margins or padding them.

Let us look for an example:

<head>
  <title>CSS</title>
  <style>
    * {
        margin: 0;
    }
  </style>
</head>
<body>
  <h1>Codespeedy</h1>
  <p>Coding is fun.</p>
</body>

Element type Selector

This selector provides an element type name and matches the instance of element type for styling.

For example:

<head>
  <title>CSS</title>
  <style>
    h2 {
      color: black;
    }
    p {
        color: orange;
    }
  </style>
</head>
<body>
  <h2>Codespeedy</h2>
  <p>Coding is fun.</p>
</body>

Id Selector

This selector specifies and defines a rule for a single element. It is denoted with a # and an id value.

For example:

<head>
  <title> CSS</title>
  <style>    
    #c {
        color: #ff0000;
    }
  </style>
</head>
<body>
  <p id="c">Codespeedy</p>
</body>

Class Selector

It includes class attributes to select elements of the content for styling and formatting. It is denoted with a (.) and a class value.

As an example:

<head>
  <title>CSS</title>
  <style>    
    .or {
        color: #0000ff;
    }
  </style>
</head>
<body>
  <h1 class="or">Codespeedy</h1>
</body>

Grouped selector

You can group these selectors according to the sharing of styles of the elements. It prevents you from the repetition of the same styling rules again and again.

<head>
<title>CSS</title>
<style>
  h1 {
    font-size: 10px;
  }
  h2 {
    font-size: 20px;
  
  }
  h3 {
    font-size: 30px;
    
  }
</style>
</head>
<body>
  <h1>Codespeedy</h1>
  <h2>Codespeedy</h2>
  <h3>Codespeedy</h3>
</body>

These were some of the commonly used selectors in the designing of web pages, but there were more like Sibling, child, adjacent sibling selectors, which are mostly used in advance level programming.