What are CSS Selectors & How Do They Work?

What is a selector?

   A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

Types of Selectors

 There are various types of selectors in CSS. They are:

                 - Universal selector
                 - Individual selector
                 - Class and id selector
                 - And selector (chained)
                 - Combined selector
                 - Inside an element selector
                 - Direct child selector
                 - Sibling Selector

Universal selector

              The universal selector provided by CSS helps in choosing any elements within the HTML page. It goes with a single element and uses the asterisk(*). The * is used for selecting all elements. This asterisk also has the capability to select all elements that are inside another element. The universal selector becomes helpful when you wish to put a specific style in all the HTML elements within your web page. It can also be used for every single element that is within the element of your HTML page.

Example:

• { margin : 0px; padding : 0px; }

In the above example. All HTML elements will have 0px padding and margins, and it will overwrite default padding and margins with all HTML elements.

Class and id selector

               - The class selector selects elements with a specific class attribute. It matches all the HTML elements based on the contents of their class attribute. The . symbol, along with the class name, is used to select the desired class.

Example: .class-name { / Define properties here / }

              -  The ID selector matches an element based on the value of its id attribute. In order for the element to be selected, its ID attribute must exactly match the value given in the selector. The # symbol and the id of the HTML element name are used to select the desired element.

Example:

#idname { / Define properties here / }

            - The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element.

And selector

            And selector is used to select two or more elements in order style them at the same time. Comma is used to combine these elements.

Example: h1 , p , h3{ / Define properties here / }

Combined selector

          A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

• descendant selector (space) div p { background-color: red; }

• child selector (>) div > p { background-color: green; }

• adjacent sibling selector (+) div + p { background-color: yellow; }

• general sibling selector (~) div ~ p { background-color: blue; }

Conclusion

           Selectors are very useful in case of styling elements efficiently. So mastering these will help you to write code faster and more effectively. I have explained about some selectors above and there are more selectors in CSS. You can learn it on the internet and practice it to become good at it.