 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome back to KTL's HTML and CSS tutorial. Today we will study lesson-39.
In our previous lesson we have studied CSS overflow property.
Today we will learn about CSS pseudo-classes.
CSS pseudo-classes
Pseudo-classes are used to apply special effects to selectors. Syntax for writing a pseudo-class is as follows:
selector: pseudo-class {property: value};
We can also use a pseudo-class with a class. Syntax is as follows:
selector.class: pseudo-class {property: value};
We have used some pseudo-classes in our prior lessons. In lesson-26 we have used pseudo-classes for applying styles to the links. Let us understand them.
Note the following code.
a:link {
color: green;
background-color: black;
}
In this we have given style to a hyperlink when it is in the link state. Here "a" is the selector and "link" is the pseudo-class. In the similar manner we have given styles for visited, hover, and active states of a link.
Let us study some pseudo-classes today.
CSS First-child pseudo-class
Let us understand pseudo-class - first-child. To understand this let us write this in our script.
Open a new Notepad file. Copy code from lesson-38-2 in this lesson.
From this code delete style written for para1. Also delete class="para1" written in the p tag. Delete the heading. Now let us write style for first-child as follows:
p:first-child {
font-weight:bold;
color:red;
}
Here "p" is the selector and "first-child" is the pseudo-class. Our script will look as shown in the following figure. You can also open PDF file of this script.
 |
| Figure 39-1. Pseudo-class - first-child |
Now save this file as "Lesson-39-1" and "Lesson-39-1. html". Double click on the HTML file and see the output.
 |
| Figure 39-2. Pseudo-class - first-child |
In our code, we have specified that the first child should be displayed bold and its color should be red. Observe this in the output. First paragraph is displayed in this style.
Let us take another example of first-child.
<style>
p > b:first-child {
color: red;
}
p > b:first-child {
color: red;
}
Note the code
p > b:first-child.
In this p stands for paragraph and b stands for bold. Therefor this states that - search for words in bold and only first occurrence of this should be displayed in red color.
Once again let us write this in our script. Open a new Notepad file and copy all code from lesson-39-01.
Delete the code we have already written for first-child. Copy the code given above in style. Make sure to make some words bold in both paragraphs. Save this file as "Lesson-39-02" and "Lesson-39-02.html".
 |
| Figure 39-3. CSS pseudo-class - first-child |
Double click on the HTML file and see the output.
 |
| Figure 39-3. CSS pseudo-class - first-child |
Note that only first bold word in each paragraph is displayed in red color.
Important Points:
1. Pseudo-class is used to apply special effects to elements in a web page.
2. To write a pseudo-class name of selector and name of pseudo-class are given.3
