Types of CSS selectors
Type
1. Universal Selector
2. ID Selector
3. Tag Selector
4. Class Selector
5.Attribute Selector
1. Universal Selector
The universal selector, written as i.e. asterisk or star symbol, matches every single element on the page. It is used for selecting all elements on a page. The universal selector may be omitted if other conditions exist on the target element. This selector is often used to remove the default margins and paddings from the elements for quick testing purpose.
Syntax:
*{
style properties
}
Universal Selector
Example
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2> Universal Selector</h2>
<p> This style will be applied on every paragraph.</p>
<p id="para1">Second Paragraph</p>
<p>and Third Paragraph</p>
</body>
</html>
Universal Selector
output
2. ID selector
This selector is used to select the id attribute of an HTML, element for selecting the specific element An id is always unique within the page so it is chosen to select a single, unique element. To select a element with a specific id, write a hash character, followed by the id of the element
What's special about ID styles is that they should be used only once per page. ID selectors are great for creating page layouts where you want to define each section of a page only once; they are ideal for creating a CSS layout.
ID selector
Example
<!DOCTYPE html>
<html>
<head>
<style>
#id1{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p id="id1">ID Selector</p>
<p>This paragraph is not Affected.</p>
<p> id="id1">This paragraph is Affected.</p>
</body>
</html>
ID selector
output
3. Tag Selector
The tag selector is used to redefine existing HTML tags. Select this option if you want to change the formatting options for an HTML tag, such as the <h1> (heading 1) tag or the <ul> (unordered list) tag. In many cases, redefining existing HTML tags with CSS has advantages over creating new styles.
Tag Selector
Example
<!DOCTYPE html>
<html>
<head>
<style>
P{
text-align: center;
color: red;
}
h1{
color:blue;
text-align:center;
}
</style>
</head>
<body>
<h1> Tag Selector</h1>
<p>Every paragraph will be affected by the style.</p>
<p>Welcome</p>
<h1> Every Heading Element<br> will be affected </h1>
</body>
</html>
Tag Selector
output
4. Class Selector
It is used to define any HTML element which has the class attribute's. The element having that class will be formatted / style according to the given rule. It can be defined by using "" (full stop) symbol along with the class name.
Syntax:
class_name
{
style properties
}
Class Selector
Example
<!DOCTYPE html>
<html>
<head>
<title>Class Selector</title>
<style type="text/css">
P.abc {
color:red;
text-align: center;
}
</style>
</head>
<body>
<h1 class="abc">This is Heading </h1> <p class="abc">First Paragraph</p>
<p class="abc">Second Paragraph</p>
</body>
</html>
Class Selector
output
Class Selector
class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
Class Selector
Example
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1> class selector</h1>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Americap.</p>
</div>
<p>My best friend is Mickey.</p>
<p class="intro">My best friend is Mickey.</p>
</body>
</html>
Class Selector
output
5. Attribute Selectors
HTML elements could be styled based on the presence of an attribute using the Attribute selector. For example below declaration would add border to any element with disabled attribute.
Attribute Selectors
Example
<!DOCTYPE html>
<html>
<head>
<style>
a{
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS attribute Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.google.com" target="_blank">Google.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Attribute Selectors
output
