Before applying CSS on HTML elements we must first learn how to select the element first. In this tutorial, we will learn about what is CSS selectors and different CSS selectors type.
Introducing CSS selectors
The CSS selector is used to select an HTML element in the webpage to style.
It is part of the CSS ruleset. CSS provides us with various ways to select an element. Some of the ways are mentioned below.
As you can see in the above image CSS selector target single or multiple HTML elements that match the selection.
When the selector is matched with HTML elements then CSS declarations defined in the block is applied to those HTML elements.
Note: In CSS there is no selector or combinator to select parent, sibling of parent elements and child of parent sibling.
Types of CSS selectors
There are several different types of CSS selectors. We will discuss here few main and most commonly used selectors.
- Universal selector CSS
- Element selector
- Class selector CSS
- Id selector CSS
- Group selector
- Attribute selector
1. Universal selector CSS
The universal selector (*) selects all the elements on the webpage. Many developers use this selector to remove all the default margins and padding.
Universal selector starts with an asterisk symbol (*).
2. Element selector
If you want to select all the same element in the webpage then use an element selector.
The element selector selects all the elements in the webpage on the basis of its name. To select the element write the element name and provide CSS properties in the block.
In the above example there are 2 element selectors, 1st select all the paragraph in the webpage and 2nd select all the anchor texts.
3. CSS class selector
The class selector is used to select the element which has a class attribute. It is the most commonly used selector in CSS.
It is written with a period(.) followed by the class name and the CSS code declaration is given in curly braces.
To select any HTML element just give the class attribute to the element with the name of the class you want to select.
You can add multiple classes to a single element. The element will reflex all CSS declarations of added class.
4. Id selector CSS
The id selector is used to select a unique targeted element.
The id attribute of the element is used to target the element.
To select an element with id use a hash (#) symbol with id name.
5. Group selector
You can group multiple same or different types of selectors for the same style definition.
Suppose we have the same CSS declarations for the multiple-element as shown in the example below.
Instead of defining CSS property like as above we can use group selector.In group selector we define single CSS code and selector is separated with comma.See the example below:
You can also use different selectors together as a group selector on an element.
6. CSS attribute selector
The attribute selector selects the element in the webpage based on their attribute or by the value of the given attribute.
To select an element based on an attribute write the attribute name in a square bracket and give its value in quotes [attribute="value"].
You can also select all elements with a given attribute regardless of their value.
- CSS selector is used to select elements in the webpage to apply CSS ruleset on it.
- The most commonly used selector is the class selector.