Selectors in CSS

Types of selectors in css

1 Like

Types of CSS Selectors

There are 5 varieties of CSS Selectors available for us. We will be looking at the following important CSS Selectors:

  1. CSS Universal Selector.
  2. CSS Element Selector.
  3. CSS Id Selector.
  4. CSS Class Selector.
  5. CSS Attribute Selector.

1. CSS Universal Selector

In an HTML page, the content depends on HTML tags. A pair of tags defines a specific webpage element. The CSS universal selector selects all the elements on a webpage.

Example:

* {
color: blue;
font-size: 21px;
}

These two lines of code surrounded by the curly braces will affect all the elements present on the HTML page. We declare a universal selector with the help of an asterisk at the beginning of the curly brace. Universal Selector can be used along with the other selectors in combination.

2. CSS Element Selector

CSS Element Selector is also known as a Type selector. Element Selector in CSS tries to match the HTML elements having the same name. Therefore, a selector of

    matches all the
ul {
border: solid 1px #ccc;
}

To understand this better, let us look at an example HTML code to apply the CSS code that we have written above.

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="demo">
<p>Demo text</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3 </li>
</ul>

In this example, we will find mainly three elements namely the

    element, the
    tag and another
      element. Since our CSS code applies to the
        tag specifically, the changes in the border will be done only for our
          tags, and not for the
          tags. Usually, these changes do not apply to the content of the
            tags as well, but in some scenarios, the styles may apply to the inner elements.

            3. CSS ID Selector

            CSS ID selector helps the developer to match the ID created by the developer to its styling content. ID Selector is used with the help of the hash (#) sign before the ID name declared by the developer. ID selector matches every HTML element having an ID attribute with the value the same as that of the selector, without the hash sign.

            Here’s an example:

          #box {
          width: 90px;
          margin: 10px;
          }
          

          This CSS code can be used to match the element having the id ‘box’, like in the following sentence.

          <div id="box"></div>
          

          Here, the tag

          is just an example. We can write the ID attribute for any HTML tag. The ID Selector matches the ID attribute within the element and looks for its styling. In our example, the styling applies as long as any element contains the ID attribute ‘box’.

          The value of the ID being used is supposed to be unique. If the same ID is used for two or more elements, the code is technically invalid, but the styling of the element will still apply, hence having the same ID is usually avoided.

          Having to use a different ID every time for every HTML page, is quite rigid. Besides facing problems of rigidity, ID selectors in CSS also face the issue of specificity.

          4. CSS Class Selector

          The CSS Class selector is one of the most helpful selectors of all the selectors. It is declared by using a dot followed by the name of the class. This class name is defined by the coder, as is the case with the ID selector. The class selector searches for every element having an attribute value with the same name as the class name, without the dot.

          Example:

          .square {
          margin: 20px;
          width: 20px;
          }
          

          This CSS code can be used to match the element having the class ‘square, like in the following sentence.

          <div class="square"></div>
          

          This style also applies to all the other HTML elements having an attribute value for the class as ‘square’. An element having the same class attribute value helps us in reusing the styles and avoids unnecessary repetition. Additionally, the Class Selector is beneficial because it permits us to add several classes to a particular element. We can add more than one class to the attribute by separating each class with space.

          Example:

          <div class="square bold shape"></div>
          

          Here square, bold and shape are three different types of classes.

          5. CSS Attribute Selector

          The CSS Attribute selector styles content according to the attribute and the attribute value mentioned in the square brackets. No spaces can be present ahead of the opening square bracket.

          input[type="text"] {
          background-color: #fff;
          width: 100px;
          }
          

          This CSS code would be a match for the following HTML element.

          <input type="text">
          

          Similarly, if the value of the attribute ‘type’ changes, the Attribute selector would not match it. For example, the selector would not match the attribute if the value of ‘type’ changed from ‘text’ to ‘submit’. If the attribute selector is declared with only the attribute, and no attribute value, then it will match to all the HTML elements with the attribute ‘type’, regardless of whether the value is ‘text’ or ‘submit’.

          Example:

          input[type] {
          background-color: #fff;
          width: 100px;
          }
          

          We can also make use of attribute selectors with no specification of a value outside the square brackets. This will help us to target the attribute only, regardless of the element. In our example, it will target based on the attribute ‘type’, regardless of the element ‘input’. CSS Selectors help us to simplify our code and enable us to utilize and reuse the same CSS code for various HTML elements. They help us in styling specific segments and portions of our webpage. They provide us with the option of uniformly styling similar elements in our web page. CSS selectors are thus, an important part of the learning curve of CSS.

2 Likes

Superb response @nagesh28katke :star_struck:

A CSS selector selects the HTML element(s) that you want to style.

We can divide CSS selectors into five categories:

*** Simple selectors :** select elements based on name, id, class.

*** Combinator selectors :** select elements based on a specific relationship between them.

*** Pseudo-class selectors :** select elements based on a certain state.

*** Pseudo-elements selectors :** select and style a part of an element.

*** Attribute selectors :** select elements based on an attribute or attribute value.

1 Like