CSS Selectors
Last updated on February 28, 2023
The CSS selector finds the HTML element and applies the specified CSS properties to it. For example, to increase the font size of a paragraph element, you need to select the paragraph tag and add a CSS property to it. Look at the below example,
p {
font-size: 16px;
}
<p>This element's font size needs to increase.</p>
In this example, CSS selects a paragraph tag and applies the font-size property to it. Following are the types of selector,
- Class attribute selector
- ID attribute selector
- Element selector
- Group Selector
- Universal Selector
Class Selector
The class selector finds the element that has a specified class in the class attribute and applies the CSS properties. It works with multiple elements which means it will apply the CSS properties on all the elements that have specified class in the class attribute. The class selector starts with a dot (.) followed by the class name.
Browser Support
| Selector | Microsoft Edge | Firefox | Chrome | Opera | Safari |
| .class | yes | yes | yes | yes | yes |
Example
Let’s create a paragraph element with a class attribute.
<p class="red-color" >Make this text red.</p>Next, we need to create a class in the CSS to find the element through class name and apply the CSS property.
.red-color{
color: #ff0000;
}
In this example, the class selector finds the element through the class name and makes the text color red. You can apply this CSS property on multiple HTML elements, to do that you need to add the class in the attribute.
<span class="red-color" >Make this text red.</span>
<b class="red-color" >Make this text red.</b>
ID Selector
The ID selector works exactly the same as the class attribute selector does, the only difference is it doesn’t work with multiple elements. The ID attribute selector starts with Number sign (#) followed by ID name.
Example
To understand the ID selector you need to create an element with an ID attribute.
<p id="red-color" >Make this text red.</p>Next, we need to create an ID in the CSS to find the element through ID and apply the CSS property.
#red-color{
color: #ff0000;
}
In above example, the #red-color ID finds the element through ID name and applies the CSS property to it.
Element Selector
The element selector finds the element by element name and applies the CSS properties to it. It works with multiple elements, which means the selector applies the CSS properties to all the available elements. To make the element selector, you just need to put the element name.
element{
}
Example
Let’s create a paragraph element and make the text color green.
<p>Make text green.</p>To make the text color green, we need to create an element selector along with a color property.
p {
color: green;
}
This selector finds all the elements on the web page and applies green color to the text.
Related Posts