Selectors in CSS
A CSS selector selects the HTML element(s) for styling purposes. CSS selectors select HTML elements according to their id, class, type, attribute, etc.
There are many basic different types of selectors.
- Element Selector
- Id Selector
- Class Selector
- Universal Selector
- Group Selector
- Attribute Selector
- Pseudo-Class Selector
- Pseudo-Element Selector
HTML code: Consider the sample code to understand selectors and their uses in a better way.
HTML
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style.css"></head><body> <h1> Sample Heading </h1> <p> Geeks for Geeks is a computer science portal for geeks and computer enthusiasts. Geeks for geeks provide a variety of services for you to learn, thrive and also, have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <div id="div-container"> Geeks for geeks is a computer science portal for geeks and computer enthusiast. Geeks for geeks provide a variety of services for you to learn, thrive and also, have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </div> <p class="paragraph-class"> Geeks for geeks is a computer science portal for geeks and computer enthusiast. Geeks for geeks provide a variety of services for you to learn, thrive and also, have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <a href="#">Learn HTML</a> <a href="#">Learn CSS</a> <a href="#">Learn Javascript</a></body></html> |
We will apply CSS rules to the above HTML code.
Element selector: The element selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc.
style.css: The following code is used in the above HTML code. You can see the CSS rules applied to all <p> tags and <h1> tags.
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.
Note: An id of the element is unique on a page to use the id selector.
style.css: The following code is used in the above HTML code using the id selector.
Syntax:
#div-container{
color: blue;
background-color: gray;
}
Output:
The CSS rule below will be applied to the HTML element with id=”div-container”:
Class-selector: The class selector selects HTML elements with a specific class attribute.
style.css: The following code is used in the above HTML code 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“
Syntax:
.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.
style.css: The following code is used in the above HTML code using the universal selector. This CSS rule will be applied to each and every HTML element on the page:
Syntax:
* {
color: white;
background-color: black;
}
Output:
Group-selector: This selector is used to style all comma-separated elements with the same style.
style.css: The following code is used in the above HTML code using the group selector. Suppose you want to apply common styles to different selectors, instead of writing rules separately you can write them in groups as shown below.
Syntax:
#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.
style.css: The following code is used in the above HTML code using the attribute selector. This CSS rule will be applied to each and every HTML element on the page:
Syntax:
[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;
}
style.css: The following code is used in the above HTML code using the Pseudo-Class selector. This CSS rule will be applied to the h1 tag on the page when user will take their mouse cursor upon it because using the selector, we selected the h1 tag and in pseudo-class, we added hover.
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;
}
style.css: The following code is used in the above HTML code using the Pseudo-Element selector. This CSS rule will be applied to the p tag on the page.
p::first-line{
background-color: goldenrod;
}
Output:
Please Login to comment...