2. TYPES OF SELECTORS
There are 6 types of selectors
1. Simple Selector
2. Class Selector
3. Generic Selector
4. Id Selector
5. Universal Selector
6. Pseudo Classes
3. SIMPLE SELECTOR
The Simple Selector form is a single element to which the property and value is
applied
For example
h1
{
font-size:20pt;
color:red;
}
4.
5.
6. CLASS SELECTOR
Using Class Selector we can assign different styles to the same element. These
different styles appear on different occurrences of that element.
For example
H1.RedText
{
font-size:20pt;
color:red;
}
<body>
<h1 class=“RedText”>Heading</h1>
</body>
7.
8.
9. GENERIC SELECTOR
We define the class in generalized form, that particular class can be applied to
any tag.
For example
.RedText
{
font-size:20pt;
color:red;
}
<body>
<h1 class=“RedText”>Heading</h1>
</body>
10.
11.
12. ID SELECTOR
To define a special style for special element we can use “id Selector”. The id
Selector is similar to the Class Selector.
Syntax:- #name_of_id{property:value list;}
For example
#RedText
{
font-size:20pt;
color:red;
}
<body>
<h1 id=“RedText”>Heading</h1>
</body>
13.
14.
15. UNIVERSAL SELECTOR
This Selector is denoted by ”*”. This selector applied to all the elements in the
document.
For example
*
{
font-size:20pt;
color:red;
}
16.
17.
18. PSEUDO CLASSES
Using Pseudo classes we can give special effects on the selector. There some
pseudo classes which are more commonly used
• Focus
• Hover
• Hyperlink
Syntax:- selector:pseudo-class {property:value list;}
