Home »
CSS
Selectors in CSS
CSS Selectors: Here, we are going to learn about the selectors in CSS with its syntax and examples.
Submitted by Anjali Singh, on November 04, 2019
CSS Selectors
In CSS the selectors identify specific HTML elements as targets for CSS styles. These selectors are used to connect HTML elements to their CSS to make them look more elegant.
Syntax:
Selector-type
{
//css code
}
Basically, the selectors are categorized into the following types,
- Universal selector
- Tag selector
- Grouping selector
- Class selector
- ID selector
- Child selector
1) Universal Selector
The universal selector selects all elements and styles them. The prefix used is "*". All elements defined in the calling HTML file will be selected and styles are applied to them.
Example:
<head>
<style>
* {
background-color: red;
}
</style>
</head>
<html>
<body>
<div>
<p>Some content</p>
</div>
</body>
</html>
Output
Here, "*" takes all the elements and set their background color to red.
2) Tag Selector
The tag selector selects the elements with specific tags(<div> or <p> etc) to connect it to the CSS for styling.
Syntax:
tag-name{
//css styling
}
Example:
<!DOCTYPE html>
<head>
<style>
p {
Background-color: green;
}
</style>
</head>
<html>
<body>
<div>
<p>Some content</p>
</div>
</body>
</html>
Output
Here, it takes all the elements of paragraph(<p>) tag and set their background color to green.
3) Grouping Selector
The property grouping selector selects all the HTML elements with the same style definitions. Multiple tags are separated by "," .
Syntax:
tag-name1,tag-name2{
//css styling
}
Example:
<!DOCTYPE html>
<head>
<style>
p,
h1 {
Background-color: green;
}
</style>
</head>
<html>
<body>
<div>
<h1>heading</h1>
<p>Some content</p>
</div>
</body>
</html>
Output
Here, it takes all the elements of paragraph(<p>) and heading1(<h1>) tag and set their background color to green.
4) Class Selector
The class selector selects the elements with specific class and style them. The prefix used is "."
Syntax:
.class-name
{
//css styling
}
Example:
<!DOCTYPE html>
<head>
<style>
.head1 {
font-size: 25px;
background-color: #efefef;
color: #f40;
}
</style>
</head>
<html>
<body>
<h1 class="head1">heading</h1>
</body>
</html>
Output
Here, select and style all elements with class "head1".
5) Id Selector
The ID selector selects the elements with specific ID and style them. Here, the prefix used is "#".
#id{
//css styling
}
Example:
<!DOCTYPE html>
<head>
<style>
#team1 {
font-size: 25px;
background-color: #f1f1f1;
color: #f40;
}
#team2 {
font-size: 30px;
background-color: #f40;
color: #f1f1f1;
}
</style>
</head>
<html>
<body>
<div id="team1">
<ol>
<li>Aman</li>
<li>Bharti</li>
<li>Uma</li>
</ol>
</div>
<div id="team2">
<ol>
<li>Manju</li>
<li>Shivang</li>
<li>Amit</li>
</ol>
</div>
</body>
</html>
Output
Here, the "team1" and "team2" are the ID selectors that selects the elements with id "team1" and "team2", and set the appropriate CSS styles.
6) Child Selector
The child selector is used to select elements with a specific parent.
Syntax:
element>element
{
//css styling
}
Example:
<!DOCTYPE html>
<head>
<style>
div > h2 {
background: #f40;
padding: 2px;
font-size: 200%;
}
</style>
</head>
<html>
<body>
<div>
<h2>heading2</h2>
</div>
</body>
</html>
Output
Here, the element on the left side of > is the parent and the element on the right is the children element.
CSS Tutorial & Examples »