There are five types of Selector in CSS.
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector–
- ID
- Class
- Element
Id Selector–
<html>
<head>
<style>
#id_selector {
color: red; font-size: 60px;
}
</style>
</head>
<body>
<p id="id_selector">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Class Selector–
Universal-
<html>
<head>
<style>
.red {color: #FF0000; font-size: 60px;}
</style>
</head>
<body>
<h2 class="red">I am Heading</h2>
<p class ="red">I am first paragraph</p>
<p>I am second paragraph</p>
</body>
</html>
Element Specific-
<html>
<head>
<style>
p.red {color: #FF0000; font-size: 60px;}
</style>
</head>
<body>
<h2 class="red">I am Heading</h2>
<p class ="red">I am first paragraph</p>
<p>I am second paragraph</p>
</body>
</html>
Use Two or more class–
<html>
<head>
<style>
p.red {color: #FF0000;}
p.look{font-size: 60px;}
.algn{text-align: center;}
</style>
</head>
<body>
<h2 class="algn">I am Heading</h2>
<p class ="red look">I am first paragraph</p>
<p class="red algn">I am second paragraph</p>
</body>
</html>
Latest posts by rajeshkumar (see all)