Hello readers, Toady in my blog I will about Selectors and its types.
What is selector ?
- These are used to select the content that the user want to style.
- It can be applied to every element.
- It can also be applied to pseudo-elements.
- These are a special part of the CSS rule set.
- These select HTML elements according to their id, class, type or attribute.
The different type of selectors in CSS are as follows :-
- CSS Element Selector :- It selects the HTML element by name.
Syntax :
- <p id=para1>Me too! </p>
Below is the example showing CSS Element Selector :-
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
- CSS Id Selector :- It selects the Id attribute applied on an HTML element to select a specific element.
There is always a unquie id used in a page for selecting a single element.
It is written with the help of hash character(#).
Syntax :-
<p id="para1">Hello Javatpoint.com</p>
Below is an example showing CSS Id Selector :-
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
- CSS Class Selector :- It selects the HTML elements having a specific class attribute.
It uses .(full stop symbol) before a class name.
Below is the example showing CSS Class Selector :-
<!DOCTYPE html>
<html>
<head>
<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 blue and center-aligned.</p>
</body>
</html>
- CSS Universal Selector :- It is used a wild card character and selects all the elements within a page.
Below is the example showing CSS Universal Selector :-
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
- CSS Group Selector :- It is used when we need same style definitions to select the HTML elements.
It is help to minimize the code and comma is used to separate each selector when defining each selector in a group.
Below is the CSS code showing the use of the CSS Group Selector :-
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
0 Comment(s)