CSS is awesome and one of the most powerful tools that is available to front-end developers. Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them.
Also, selectors are one of the first things to learn for beginners. So for this tutorial we are going to learn all about CSS selectors.
💡 Note
Earlier CSS versions use Type, class, id and child selectors. CSS 2 adds more pseudo-elements, pseudo-classes, and combinators selectors. And now with CSS3, we can target almost any element on the page with wide range of selectors options.
What are Selectors in CSS?
As the name already says, CSS Selector helps us identify HTML elements on which a particular style has to be applied.
Selectors are what allows you to target specific HTML elements and apply style to them.
We can broadly divide CSS selectors into five categories and they are as follows:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
Let’s now look at all the different kinds of simple selectors available, with a brief description of each.
CSS simple selectors
Simple selectors are widely used in front-end development and cover a good amount of use cases. It includes selecting by the HTML tag name, selecting by a specific ID and selecting with a class name.
CSS Type selector
Type Selector is also known as Element selector or Tag selector. This selector must match one or more HTML elements of the same name.
Thus, a selector of nav would match all HTML nav elements, and a selector of p would match all p elements in your HTML document.
Type selector example
<body>
<div>
<p>This is a paragraph with some text in it.</p>
<div>I'm just one div in between two paragraph tags.</div>
<p>This is a different paragraph with text.</p>
</div>
</body>p {
background-color: lightblue;
}Output:
In the above example, we have directly assigned styling to all p element, this way of element selection and styling is known as Element selector, as we assign style to the element directly.
The above CSS code, will change the background color of all p element to light blue.
This mode of selection should be used when you want to apply base styling to all elements on your page, like base font family, brand color, link color etc.
CSS id selector
What if, out of all the paragraph elements with background color set as light blue, you want second paragraph background to stand out on your webpage, and you want to style it differently. How will you do that?
Here id selector can help you to achieve this style. id selector is used, when you want to style a particular element. All you have to do is, assign an id attribute to the HTML tag and provide the styling for it in the CSS file.
It uses # followed by the specified id to apply the styling rules to all elements with the matching id.
id selector example
<body>
<div>
<p>This paragraph doesn't have any id attribute.</p>
<div>I'm just one div in between two paragraph tags.</div>
<p id="coffee">This paragraph has an id of "coffee".</p>
</div>
</body>p {
background-color: lightblue;
}
#coffee {
background-color: orange;
}
💡 Note
ID selectors are the most powerful type of selector in terms of CSS specificity. Meaning that they beat out other types of selectors and the styles defined within win.
That sounds good, but that’s typically considered bad, because it’s nice to have lower-specificity selectors that are easier to override when needed.
You can also make an id selector element specific, by appending the tag before the #id selector in CSS.
<body>
<div>
<p>This paragraph doesn't have any id attribute.</p>
<div>I'm just one div in between two paragraph tags.</div>
<p id="coffee">This paragraph has an id of "coffee".</p>
</div>
</body>p {
background-color: lightblue;
}
p#coffee {
background-color: orange;
}This would select only the paragraph elements with their id attribute set to coffee.
Although CSS provides you with a way of selecting element specific id rules, like p#coffee, it is inappropriate to use same tag names along with id selector all the time and then filter them out based on elements.
However, such rules do make sense if you have a style sheet that is being used site-wide and you have different elements by the id coffee in different documents.
To be on the safer side and avoid confusion, it is better to use unique id for the elements.
This simplicity is a double-edged sword and should not be used too much, as it can make it a nightmare to maintain your CSS later on. It’s therefore better to apply class selectors, which is our next in the list.
CSS class selector
Class selectors are your friend. They are probably the most useful and versatile selectors out there because they are well supported in all browsers.
In fact, you can target specific blocks of your HTML via class or id selectors. IDs are expected to only be used once and nowadays, are often reserved for JavaScript hooking.
Classes are often a more standard method of HTML blocks and are more reusable in nature than IDs. Classes are declared via the class attribute in HTML and called by CSS using(.) period.
class selector example
<body>
<h1 class="blue">This is a heading</h1>
<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>.blue {
color: blue;
}
The above style rules renders the text in blue of every element in the document that has class attribute set to blue. You can make it a bit more particular. For example:
p.blue {
color: blue;
}
The style rule inside the selector p.blue renders the text in blue of only those elements that has class attribute set to blue, and has no effect on other paragraphs.
CSS universal selector
CSS Universal selector is used as a wildcard character which is denoted by (*) star symbol.. By universal selector you can select all the elements on the HTML page.
universal selector example
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>* {
color: blue;
font-size: 20px;
}
Many front-end developers uses this trick to zero out the margin and padding.
* {
margin: 0;
padding: 0;
}While this is certainly fine for quick tests however it is advisable never use this in production code. It adds too much weight on the browser, and is unnecessary.
Universal selector can also be used with child selectors. In the example below, the background color of all elements changes to yellow and the background color of all elements inside the element changes to coral.
<body>
<div class="main">
<h3>Welcome to Hello Sunil!</h3>
<p>Here is an example for the Universal Selector.</p>
</div>
</body>* {
background-color: yellow;
}
div * {
background-color: coral;
}
CSS grouping selector
Often several selectors in CSS share the same style rules declarations. You can group them into a comma-separated list to minimize the code in your style sheet. It also prevents you from repeating the same style rules over and over again. Let’s take a look:
The grouping selector is used to select all the elements with the same style definitions. Front-end developers usually use grouping selector to minimize the code.
Grouping selector example
<body>
<h1>This is a heading of level 1</h1>
<h2>This is a heading of level 2</h2>
<h3>This is a heading of level 3</h3>
</body>h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}
As you can see in the above example, the same style rule font-weight: normal; is shared by the selectors h1, h2 and h3, so it can be grouped in a comma-separated list, like this:
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
h1,
h2,
h3 {
font-weight: normal;
}Conclusion
We have now covered all of the simple selectors which are used in CSS. As a bonus, here is a cheatsheet for you to remember all simple selectors in CSS.
| Selector | Example | Example description |
element | p | Selects all <p> elements |
#id | #firstname | Selects the element with id="firstname" |
.class | .intro | Selects all elements with class="intro" |
element,element,.. | div, p | Selects all <div> elements and <p> all elements |
This is our first part of multi series blog about CSS selectors. In part 2 we are going to learn CSS combinator selectors. Also, we would be happy to hear your thoughts on simple CSS selectors. Kindly let us know under comment section.
Add comment