CSS selectors are used to select the html content you want to style. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. Simply we can say that CSS selectors are used to select the html content you want to style.
There are different types of css selectors.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1. 1. CSS element
selector
The element selector selects the HTML element by name. Element
selector or Tag selector, works on HTML tag level. When we add styling for an
HTML tag directly, in our CSS file, it is known as element selectors.
Example
<! Doctype html>
<html>
<head>
<title> css element selector</title>
<style>
P{
Background-color:pink;
color:blue;
10.Font-size: 22px;
Text-align:center;
}
</style>
</head>
<body>
<p>hello world</p>
<p>this is the example of css element
selector</p>
</body>
</html>
Output
2. CSS
Id selector
The id
selector uses the id attribute of an HTML element to select a specific element. An
id is always unique within the page so it is chosen to select a single, unique
element. It is written with the hash character (#), followed by the id of the
element.
Example
<!DOCTYPE html>
<html>
<head>
<title> Example of Class
selector</title>
<style>
#style1 {
text-align: center;
color: blue;
Background-color:pink;
Font-size:22px;
}
</style>
</head>
<body>
<p id="style1">welcome to
my site. </p>
<p>This paragraph will not be affected
because the id selector is not determined here.</p>
</body>
</html>
Output
3. CSS class selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.
Note: A class should name not be started with a number.
Example
<!DOCTYPE html>
<html>
<head>
<title> Example
of Class Selector</title>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is
also blue and center-aligned.</p>
</body>
</html>
4. CSS Universal Selector
The universal selector (*) selects all HTML
elements on the page at a time.
Example
<!DOCTYPE
html>
<html>
<head>
<title>Example of CSS universal selector</title>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">this also!</p>
<p>And this too!</p>
</body>
</html>
Output
5. CSS group
selector:
The grouping selector selects all the HTML elements
with the same style definitions. Grouping selector is used to
minimize the code. Commas are used to separate each selector in grouping.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello everyone</h1>
<h2>welcome to my website (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output
0 Comments