CSS Selectors
CSS selectors target the HTML elements on your pages, allowing you to add styles based on their ID, class, type, attribute, and more. This guide will help you to understand the intricacies of CSS selectors and their important role in enhancing the user experience of your web pages. Understanding these selectors—such as the universal selector, attribute selector, pseudo-class selector, and combinator selectors—enables more efficient and dynamic web design.
Types of CSS Selectors
CSS selectors come in various types, each with its unique way of selecting HTML elements. Let’s explore them:
CSS Selectors | Description |
---|---|
Simple Selectors | It is used to select the HTML elements based on their element name, id, attributes, etc |
Universal Selector | Selects all elements on the page. |
Attribute Selector | Targets elements based on their attribute values. |
Pseudo-Class Selector | Selects elements based on their state or position, such as :hover for hover effects. |
Combinator Selectors | Combine selectors to specify relationships between elements, such as descendants ( ) or child (> ). |
Pseudo-Element Selector | Selects specific parts of an element, such as ::before or ::after . |
Table of Content
- Simple Selectors
- Element Selector
- Id Selector
- Class Selector
- Universal Selector
- Group Selector
- Attribute Selector
- Pseudo-Class Selector
- Pseudo-Element Selector
Simple Selectors
Simple selectors contains the below classes.
Simple Selector | Description |
---|---|
Element Selector | Selects HTML elements based on their tag names. |
Id Selector | Targets an HTML element with a specific id attribute. |
Class Selector | Selects elements with a particular class attribute. |
Example: In this example, we will write the code to understand selectors and their uses in a better way.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Sample Heading</h1>
<p>This is Content inside first paragraph</p>
<div id="div-container">
This is a div with id div-container
</div>
<p class="paragraph-class">
This is a paragraph with class paragraph-class
</p>
</body>
</html>
Note: We will apply CSS rules to the above Example.
Element Selector
The element selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc.
NOTE : The following code is used in the above Example. You can see the CSS rules applied to all <p> tags and <h1> tags.
CSS:
h1 {
color: red;
font-size: 3rem;
}
p {
color: white;
background-color: gray;
}
Output:
Id Selector
The id selector uses the id attribute of an HTML element to select a specific element. An id of the element is unique on a page to use the id selector.
Note: The following code is used in the above Example using the id selector.
CSS:
#div-container{
color: blue;
background-color: gray;
}
Output:
Class Selector
The class selector selects HTML elements with a specific class attribute.
Note: The following code is used in the above Example using the class selector. To use a class selector you must use ( . ) followed by class name in CSS. This rule will be applied to the HTML element with the class attribute “paragraph-class“
CSS:
.paragraph-class {
color:white;
font-family: monospace;
background-color: purple;
}
Output:
Universal Selector
The Universal selector (*) in CSS is used to select all the elements in an HTML document. It also includes other elements which are inside under another element.
Note: The following code is used in the above Example using the universal selector. This CSS rule will be applied to each and every HTML element on the page:
CSS:
* {
color: white;
background-color: black;
}
Output:
Group Selector
The Group selector is used to style all comma-separated elements with the same style.
Note: Suppose you want to apply common styles to different selectors, instead of writing rules separately you can write them in groups as shown below.
CSS:
#div-container, .paragraph-class, h1{
color: white;
background-color: purple;
font-family: monospace;
}
Output:
Attribute Selector
The attribute selector [attribute] is used to select the elements with a specified attribute or attribute value.
Note: The following code is used in the above Example using the attribute selector. This CSS rule will be applied to each and every HTML element on the page:
CSS:
[href] {
background-color: lightgreen;
color: black;
font-family: monospace;
font-size: 1rem;
}
Output:
Pseudo-Class Selector
It is used to style a special type of state of any element. For example- It is used to style an element when a mouse cursor hovers over it.
Note: We use a single colon(:) in the case of a Pseudo-Class Selector.
Syntax:
Selector:Pseudo-Class {
Property: Value;
}
CSS:
h1:hover{
background-color: aqua;
}
Output:
Pseudo-Element Selector
It is used to style any specific part of the element. For Example- It is used to style the first letter or the first line of any element.
Note: We use a double colon(::) in the case of a Pseudo-Element Selector.
Syntax:
Selector:Pseudo-Element{
Property:Value;
}
CSS:
p::first-line{
background-color: goldenrod;
}
Output:
CSS selectors is crucial for effective web design. These selectors allow developers to precisely target and style HTML elements, creating more dynamic and visually appealing web pages. By utilizing various selectors—simple, combinator, pseudo-class, and pseudo-element—you can significantly enhance the aesthetics and functionality of your websites. Incorporating these selectors into your CSS toolkit will elevate your web development skills and improve user experience.