Back to: CSS Tutorials for Beginners and Professionals
CSS Selectors with Examples
In this article, I am going to discuss CSS Selectors with Examples. Please read our previous article where we discussed How to Add CSS to HTML Pages with Examples. At the end of this article, you will understand the different CSS Selectors, Properties, and Values with Examples.
What are CSS Selectors?
CSS selectors are used to selecting the content you want to style. Selectors are the part of CSS ruleset. CSS selectors select HTML elements according to their id, class, type, attribute, etc. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.
To style an element or some part of an element, we need to select the element first. Selectors in CSS are used to select HTML elements to style them. List of Basic and Most Used Selectors in CSS
- Selecting HTML elements based on their names
- Selecting HTML elements based on their class names
- Selecting HTML elements based on their IDs
- Selecting all HTML elements using * (the universal selector)
Let’s first briefly describe these basic and most used selectors in CSS, with the help of examples.
CSS Selectors Types
There are basically five types of selectors
- Element or Tag Selector
- Class Selector
- Universal Selector (*)
- Id Selector
- Attribute Selector
Element or Tag Selectors in CSS
The element selector selects the HTML element by name. You select a selector or tag, for example, the h1 tag applies a CSS rule to this. Now inside your page, there may be 2 or more than 2 h1 tags available. This CSS rule will be applied to all the h1 tags.
h1{
color: red;
}
Set the equal style for all h1 elements.
Example to understand CSS Element Selector:
<!DOCTYPE html> <html> <head> <style> h1{ color: red; } </style> </head> <body> <h1>This style will be applied on every h1 heading</h1> <h1 id="para1">Me too!</h1> <h1>And me!</h1> </body> </html>
Output:
CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character (full stop symbol) followed by the class name. A class name should not be started with a number.
With classes, we can define a style which we then apply to all elements that have the same class and a class is added to an element in HTML by adding the class attributes. This selector is a bit different than the tag selector; it starts with a dot and then your class name and then the CSS rules.
.h1-header{
color: red;
}
Example to Understand CSS Class Selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Course</title> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <style> .h1-header{ color: red; } </style> </head> <body> <section class="h1-header"> <h1>First Section Header</h1> </section> <section> <h1>Second Section Header</h1> </section> </body> </html>
Output
CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages. The universal selector selects all the elements present on the page and applies the CSS rules to all the elements.
*{
color: red;
}
Example to understand CSS Universal Selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Course</title> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <style> *{ color: red; } </style> </head> <body> <main> <section> <h1>First Section Header</h1> </section> <section> <p>Second Paragraph</p> </section> </main> </body> </html>
Output
CSS ID Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id of the element.
ID selectors allow you to select elements by the ID they have and then apply a style to that one specific element, Since an ID only exists once on a page, we only apply the style to one single element. This selector is a bit different than the class selector; it starts with the hashtag (#) and then your Id name and then the CSS rules.
#h1_first{
color: red;
}
Example to understand CSS ID Selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Course</title> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <style> #h1_first{ color: red; } </style> </head> <body> <main> <section> <h1 id="h1_first">First Section Header</h1> </section> <section> <h1>Second Selection Header</h1> </section> </main> </body> </html>
Output
CSS Attribute Selector
The CSS Attribute selector styles content according to the attribute and the attribute value mentioned in the square brackets. No spaces can be present ahead of the opening square bracket. In Attribute Selector you select HTML elements by the attribute they have, and this again can select multiple elements, unlike the ID selector which only selects one.
Here, you set the equal style to all elements with the same attributes, in HTML you would have a button with the disabled attribute, a standard HTML button attribute you can set, and in CSS, you would select all buttons or all elements with the disabled attribute by enclosing the attribute name in square brackets.
[Disabled]{
background-color: red;
color: white;
}
Example to understand CSS Attribute Selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Course</title> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <style> [Disabled]{ background-color: red; color: white; } </style> </head> <body> <main> <section> <input type="text" disabled value="Disabled"> </section> <section> <input type="text" value="Not Disabled"> </section> <section> <button disabled>Submit</button> </section> </main> </body> </html>
Output
Here, we have two elements (Input box and button) with the disabled attribute. Hence the CSS rule has applied to both the elements.
CSS Grouping Selector:
The grouping selector selects all the HTML elements with the same style definitions. Look at the following CSS code (the h1, h2, and p elements have the same style definitions).
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}
Example to understand CSS Grouping Selector:
<!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>
Output:
In the next article, I am going to discuss Conflicting CSS Styles with Examples. Here, in this article, I try to explain CSS Selectors with Examples. I hope this CSS Selectors, Properties, and Values with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.