While HyperText Markup Language (HTML) is necessary to provide the skeletal system of the webpage, Cascading Style Sheets (CSS) is essential to style the webpage. CSS is applied to the HTML elements in three ways: inline CSS, internal CSS, and external CSS.
In the inline CSS method, you have to apply the CSS properties inside the style tag applied between the elements. But how will you apply CSS in the internal and external methods? For this, something called the CSS selectors is used. In this blog, we will discuss the various CSS selectors in detail. Let's get started.
CSS Selectors
To apply CSS to an element, it has to be selected. In CSS, this is done by using CSS selectors. CSS selectors are patterns used to select the element that has to be styled. Several types of selectors like universal selector, ID selector, CSS selector, etc., are available to select the elements.
To understand how selectors work and their role in CSS, it's essential to know the different parts of a CSS rule. A CSS rule set is a block of code containing one or more selectors and one or more declarations.
CSS Ruleset
All the divs on the web page are selected in the above example, and the CSS properties are applied. Now let's explore the CSS selectors one by one.
Universal Selector
A universal selector selects every HTML element present on the webpage. It is also known as a wildcard. The universal selector is denoted by the asterisk (*) symbol.
Syntax
* {
property: value;
}
Example
* {
margin: 0;
}
In the above example, all the elements are selected, and the margin is set to 0.
Type Selector
The type selector selects all the HTML elements of the particular type. It is also called an element selector. Using this, we can select elements like paragraph<p> , button <button>, etc.
Syntax
element {
property: value;
}
Example
p {
color: red;
}
In the above example, all the p elements present on the web page are selected, and the color is set to red.
Class Selector
The class selector selects the HTML elements with the specific class attribute. It uses the full stop "." followed by the class name.
Syntax
.className {
property: value;
}
Example
.container {
background-color: yellow;
}
In the above example, all the elements with the class name "container" present on the web page are selected, and the background color is set to yellow.
ID Selector
The ID selector selects all the HTML elements with the specific ID attribute. It is used with the hashtag "#" followed by the id name.
Syntax
#IDName {
property: value;
}
Example
#mainContainer {
background-color: black;
}
In the above example, the element with the ID name "mainContainer" present on the web page is selected, and the background color is set to black.
Attribute Selector
The attribute selector selects HTML elements with a specified attribute. For this, the square brackets ([ ]) are used. In case-sensitive attribute selectors, the "s" operator is added to the attribute selector. And for case insensitivity, the "i" operator is added to the attribute selector.
Syntax
[attribute] {
property: value;
}
The different CSS attribute selectors are as follows:-
Attribute selector
Description
[attribute]
Selects the HTML elements with the specified attribute.
[attribute=value]
Select the HTML elements with the specified attribute and value.
[attribute~=value]
Selects the HTML elements with the attribute value containing the specified word. In this case, the value has to be a whole word like "first," "main," etc which can be separated by spaces.
[attribute|=value]
Selects the HTML elements with the specified attribute starting with the specified value. In this case, the value has to be a whole word like "first," "main," etc which can be separated by hyphens (-).
[attribute^=value]
Select the HTML elements whose attribute value begins with the specified value.
[attribute$=value]
Selects the HTML elements whose attribute value ends with the specified value.
[attribute*=value]
Selects the HTML elements whose attribute value contains the specified value.
Let’s see some examples to understand the attribute selectors better.
Example
<style>
/* class starting with the word main*/
[class|="main"] {
border: 2px solid #000;
width: 180px;
}
/* data type containing "pri" without considering the case sensitivity*/
[data-type*="pri" i] {
color: #007bff;
}
/* data type starting with "sec" */
[data-type^="sec"] {
color: #6c757d;
}
/* data type ending with "ary" */
[data-type$="ary"] {
font-size: 2rem;
}
/* data type containing with the word info*/
[data-type~="info"] {
color: #17a2b8;
}
</style>
<body>
<ul class="main-container">
<li data-type="primary">Primary</li>
<li data-type="Primary">Primary</li>
<li data-type="secondary">Secondary</li>
<li data-type="danger info">Danger/Info</li>
</ul>
</body>
Output
Grouping Selectors
Instead of selecting a single selector one by one, we can select multiple selectors using the grouping selector. It selects all the HTML elements with the same style definitions. Code can be minimized using the grouping selector. In the grouping selector, a comma is used to separate each selector.
In the above example, the elements: p, button, and h1 are set to have a background color of red.
Pseudo-classes and Pseudo-elements
HTML elements find themselves in various states when they are interacted with or when one of their child elements is in a specific state. A pseudo-class is a selector that selects HTML elements that are in a particular state. For example, when a mouse pointer hovers over an HTML element, a different set of CSS properties can be given using the : hover pseudo-class.
Syntax
selector: pseudo-class{
property: value;
}
Example
a :hover {
font-size: 2rem;
}
In the above example, when the user hovers over an anchor element in the page, the font size changes.
A pseudo-element selector applies styles to parts of the content in scenarios with no specific HTML element to select. They can be used to style the first letter or line of an HTML element, insert content after or before the content of an HTML element.
Pseudo-elements use a double colon (::) instead of the single colon (:) used in pseudo-classes.
Syntax
selector:: pseudo-element{
property: value;
}
Example
p::first-letter {
color: red;
}
In the above example, the first letter of the p element will be red.
Complex CSS Selectors
To have fine-grained control over CSS, complex selectors like combinators, compound selectors are used.
Combinators
Combinator selectors are the CSS selectors used to combine more than one selector and create a hybrid selector. They are similar to conjunctions in English. The different types of combinators are as follows:-
1. Descendant combinator: It is used to select a child element.
Syntax
parent-element child-element{
property: value;
}
Example
.container p {
color: yellow;
}
This sets the color of the p elements inside the container class as yellow.
2. Next sibling combinator: Select an HTML element that immediately follows another HTML element.
Syntax
element1 + element2 {
property: value;
}
Example
div + p {
color: green;
}
This sets the color of the p elements that comes just after the div element as green.
3. Child selectors: It selects all elements that are the direct children of a specified HTML element.
This sets the background color of the p elements that are the direct children of the div element to green.
4. General Sibling Selector: It selects all HTML elements that are next siblings of a specified HTML element.
Syntax
element1 ~ element2 {
property: value;
}
Example
div ~ p {
background-color: yellow;
}
This sets the background color of all the p elements that come after the div element to green.
Compound CSS Selectors
When two or more selectors are used together, without a combinator, it is called compound selectors. It is used to increase specificity and code readability.
Example
a.navLink {
color: red;
}
This sets the color of all the anchor elements with the class name navLink as red.
Which selector has to be used to select the active links? Ans:- The CSS :active selector is used to select and style the active link present in the webpage.
What is the use of CSS ::after selector? Ans:- The CSS ::after selector is used to insert an extra content after the selected element's content.
What is the difference between ".container1.container2" and ".container1 .container2"? Ans:- ".container1.container2" selects all elements with both container1 and container2 set within its class attribute. ".container1 .container2" selects all elements with class name container2, a descendant of an element with class name container1.
What is the use of CSS :not(selector)? Ans:- The CSS :not(selector) selects the element that is not the specified selector. For example, :not(p) selects all elements except the p element.
What is the difference between id and class in CSS? Ans:- "id" is unique to a certain element and can only be used once, while "class" selector can be applied multiple times to multiple elements.
Key Takeaways
This blog covers the various types of CSS selectors like class selector, ID selector, type selector, attribute selector, combinator selector, etc., in detail. At the end of the blog, some of the frequently asked questions related to CSS selectors have also been discussed.
46+ registered 