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
tag, etc. There are many advance CSS Selectors also, that can be combined together to dive deep in the selector's arena.
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:
Explanation: In the syntax example, we have used the
<p> tag as a tag selector. Now all the paragraphs in the webpage will have red text color. Remember that tags
< > will be omitted when using tag selectors. Only tag name will be used.
Look at the example below:
This style will be applied on every paragraph..
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.
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.
Explanation: In the example above, the ID
#demo-id is used as a selector. Now, wherever this ID is applied, whether in a paragraph, heading, div, or anything, the text color will be red inside that element.
Hello World! (This paragraph is affected by style).
This paragraph is not affected by the style.
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.
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.
Note: When using Class Selector, the dot(.) symbol is used in front of class name.
Explanation: Any element which will use the demo-class as class name will display text color as red. It can be applied to more than one elements.
Look at the example below to understand the use of classes.
This paragraph is orange and center-aligned.
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:
This paragraph will be seagreen and center-aligned.
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:
This paragraph is seagreen and left-aligned.
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:
This style will be applied on every paragraph.
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!