---

CSS Selectors

CSS selectors are used to select any element and then apply CSS on it. These selectors are very useful in writing a clean and effective code.

CSS Selectors are used in internal and external CSS. Although inline css is also an option but it is never recommended to use. There are various types of selector through which you can select an element. These selectors can be combined together to select a more specific element also.

A CSS Selector can select an element by its id, class, type, attribute, tag, etc. There are many advance CSS Selectors also, that can be combined together to dive deep in the selector's arena.

Some popular CSS Selectors are:

• CSS Tag Selector
• CSS Id Selector
• CSS Class Selector
• CSS Group Selector
• CSS Universal Selector
• CSS Descendant Selector

---

CSS Tag Selector

The Tag selector is used to select a element based on its tag name. Any tag name in HTML can be used as a Tag Selector. When you use a simple tag selector and give it some style, then all over the webpage that tag's content will use the same CSS style.

Let's look at the syntax of using a Tag Selector:

Look at the example below:

Output

---

CSS ID Selector

CSS ID selector is used to select a particular element with a specific ID associated with it. An ID of an element is unique in itself, no two elements can have same ID. It makes it easy to select a particular element and give it a proper CSS Styling.

Defining an ID in CSS

To define an ID of an element just use the id attribute. You can write anything as an ID but it should start with an alphabet or an underscore(_).

Look how conviniently we have created this ID and now it can be used to target this specific paragraph only.

Note: When using ID Selectors, the hash(#) symbol is used in front of ID name.

Syntax of using ID Selector:

Output

---

CSS Class Selector

CSS Class selector works similar to CSS ID selector but with a slight difference. An ID is unique to the element whereas a class can be common to multiple elements. It gives freedom from writing the same CSS multiple times for different elements. If the CSS Style definition is same then just add a common class to the elements and only define CSS for that particular class. It will be applied to all the elements with that class.

Defining a class in CSS

To define a class for an element, just use the class attribute. You can write anything as an class name but it should start with an alphabet or an underscore(_).

In the example above, a common class demo-class is used in all paragraphs.

Syntax of using Class Selector:

Look at the example below to understand the use of classes.

Output

---

CSS Dot(.) Selector

If you want to style only one specific HTML element with a common class name then you can use the dot(.) selector. Suppose there is one paragraph and one heading tag of same class, but you want to stylize only the paragraph, then you should combine the tag name with class name by using dot(.) selector. In this way, only the paragraph will get affected by the CSS and not the Heading.

The syntax is:

Look at the example below to understand it better:

Output

---

CSS Grouping(,) Selector

The grouping selector is a very handy selector in case of same CSS Styling for different elements. It minimizes the code.

Suppose, there is a div, a heading and a paragraph and in all of these we want the font color to be red. Instead of declaring same color property 3 times for all 3 elements we can just declare it once using a comma(,).

It is not limited to tags only, multiple tags, IDs, or Classes can be given similar CSS by using the comma(,).

The syntax of using the Grouping Selector:

Output

---

CSS Universal Selector

The universal selector is used to select and style all the elements in the webpage. It is generally used to override default padding and margins on a webpage. Universal Selector is represented by the asterisk(*) symbol.

The syntax of using a universal selector is:

Have a look at the example below:

Output

---

We learnt about some popular CSS Selectors, but there are some advance selectors also which can create a huge impact on Selecting and Styling elements. Stay with us!

---