CSS Selectors

Let us understand what CSS selector is. But, before jumping into CSS selector we have to know what exactly CSS is.

CSS

CSS (Cascading Style Sheets) is a stylesheet language which we use to style an HTML document. With the help of CSS we can describe how each element should render on the web page.

CSS Selectors

Now let's move to CSS Selectors. First and the most important step of learning & understanding CSS is targeting and if we know how to target an element in the HTML file then our job of beautifying/styling our web page becomes easy. And for targeting we need to know about selectors.

Universal Selector

• Universal Selector is used to select all the elements. Same CSS properties are applied to all the tags when we use this selector. " * " is used to select all the elements of the document.
• Please have a look at below example for better understanding.

Individual Selector

• With the help of Individual Selector we can address or select any individual tag of the HTML document.
• It is used when we want to target all the tag of the same type on the web page.
• Please have a look at below example for better understanding.

Class and Id Selector

• Class selector is used to select a particular class and id selector is used to select a particular tag having the id mentioned in CSS file.
• " . " is used in CSS before class name for selecting a class and " #" is used before id for selecting the desired id.
• Have a look at the below example.

And Selector (chained)

• And selector or chained selector is used to select a tag which has two or more classes.
• Have a look at below example for better understanding.

Combined Selector

• Combined Selector is used when we want to give the same CSS property to more than one tag.
• Have a look at below example for better understanding.

Inside an element Selector

• It is used to select a tag which is inside an other element. Space is used between the tags.
• Have a look at below example for better understanding.

Direct Child Selector

• It is used to select tags that are direct children of the first element. " > " is used between the parent tag and child tag.
• Have a look at below example for better understanding.

Sibling ~ or + Selector

• This selector is used when we want to select sibling of a tag for using CSS property. " + " is used to select an element that is directly after another specific element where as " ~ " is used to select all elements that are next siblings of a specified element.
• Have a look at below example for better understanding.

Before and After Pseudo Selector

• The :: before pseudo-element is used to insert some content before the content of an element.
• he :: after pseudo-element is used to insert some content after the content of an element.
• Have a look at below example for better understanding.

Thanks for reading. Happy Learning!!