In the last article, we learned about pseudo-classes in CSS and completed one example related to links where we change the color of links based on pseudo-classes applied to it. In this article, we are going deep inside pseudo-classes so that we can use them more powerfully.
Let's begin...
p a:first-child {
color: red;
Let's begin...
Let's Create a Custom Tooltip
The tooltip is a common graphical user interface element which provides more information about an element on the screen. It generally appears when we hover over a particular element. Let's create it using pseudo-classes...The first-child Pseudo-class
The first-child pseudo-class matches a specified element that is the first child of another element. In web development many times we have to access a first child of a particular element. So to make it easy, this class is in-built in CSS.Match the first <a> element
This will match any <a> element that is the first child of any element.Match first <a> element in all <p> elements
This matches the first <a> element in all <p> elements.p a:first-child {
color: red;
}
p:first-child a {
color: red;
}
That's all for today. Although there are many more pseudo-classes available in CSS, if you understand one given above properly, you can always use others without any efforts.
You can visit here to learn about all other Pseudo-classes in CSS and their uses...
In the next article, we are going to cover pseudo-elements in CSS which is really an interesting concept to learn.
Till then #keepCoding.
Match all <a> elements in all first child <p> elements
This matches all <a> elements in <p> elements that are first-child of any other elementp:first-child a {
color: red;
}
That's all for today. Although there are many more pseudo-classes available in CSS, if you understand one given above properly, you can always use others without any efforts.
You can visit here to learn about all other Pseudo-classes in CSS and their uses...
In the next article, we are going to cover pseudo-elements in CSS which is really an interesting concept to learn.
Till then #keepCoding.
Comments
Post a Comment