You are currently viewing Selectors in CSS | Web Development

Selectors in CSS | Web Development

The Selectors in CSS are used to select (or target) the HTML element(s) that you want to style. There can be many ways in which you can select the HTML element(s). So from those ways, we will some basic types of selectors.

Types of CSS Selectors:

  • CSS Element Selector: In this, the selector targets the element by the element name for styling.

Example:

h1 {
    color:#007A4D;
    text-align:center;
    }

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

Output:

Developers Dome

Junction for all coders

  • CSS Id Selector: This selector targets the id of the HTML element and the id is unique in an HTML document as we learnt earlier. So it is used to select the specific element in the document. The id is represented using a hash(#) character as prefix, followed by the id of the element.

Example:

#paragraph1 {
             color:green;
             }

Output:

Heading

This is a paragraph

  • CSS Class Selector: This selector targets the class of the HTML elements and the class attribute can be used by one or more elements in an HTML document. So it is used to select the specific element or group in the document. The class is represented using a period(.) character as prefix, followed by the class name.

Example:

.para {
       color:red;
       background-color:yellow;
       }

Output:

Heading

This is paragraph

This is another paragraph

  • CSS Grouping Selector: In this, group of elements (having same style) are used as Selectors. So that we don’t have to repeat the same styling for different elements.

Example:

h1,p {
      text-align:center;
      color:green;
      background-color:yellow;
      }

Output:

Heading

This is paragraph

  • CSS Universal Selector: This CSS Selector selects all HTML elements in the document. It is represented by asterisk(*).

Example:

* {
   text-align:center;
   color:blue;
   }

Output:

Heading

This is paragraph

This is another paragraph

Hope this article will guide you to recognize all about the Selectors in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.

This Post Has One Comment

Leave a Reply