Type of CSS Selectors
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 is star symbol matches every single element the page. It is used for selecting all elements on a page. The universal selector omitted if other conditions exist on the target element. This selector is often use to remove the default margins and padding from the element 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 is the 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 use to select the id attribute of an HTML, element selecting the specific element And id is always unique within page so it is chosen to select single, unique element. To select element with a specific id, write a hash character, follow by the id of the element
What special about ID styles is that should be use only once per page. ID selector are great for creating page layout where you want to define each section of page only once. they are ideal for creating 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 selector tag is use 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 is redefining existing HTML tag 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 affect 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 is selects elements with specific class attribute. To select element with a specific class, write a period (.) character, follow by the name of the class. You can also specify that only specific HTML element should be affect 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 element could be styled based on the presence an attribute use the Attribute selector. example below declaration 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>This links with 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
Post a Comment