Pseudo Selector Elements in CSS

Hello friends! Welcome to our series, CSS. In our last segment, we had seen about different Selectors of CSS. In total, we had seen 5 types of Selectors. In which Element, ID, Class, Universal and Group. We had covered all these 5 Selectors in the last session. So, I hope that the practical that has been performed and Selectors and shown to you, you have practiced those on your own. If while trying you have successfully run the program, it’s really well and good. And in case you face any difficulty in running the program. You can tell us about that on forums.learnvern.com. We will try to rectify your issue and revert to you at the earliest. Okay, guys! so, let’s start!  Our today’s segment is on CSS Pseudo Selector. Now, what is Pseudo Selector? When we had seen about Selectors, we had seen a total 5 types of Selectors in html. HTML’s elements. And then, ID and Class was used for Selector. And we had seen a wild card as well which had Universal Selector and Group Selector. So, we had performed the Selectors and learned about them through html elements and html attributes. Today, we are going to see Pseudo Selector of CSS. Now, what are Pseudo Selectors? Pseudo Selectors are event based like the 1^st one written here inside the paragraph. A Pseudo Class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. It means that our element which is there based on their state we apply to the Selectors. For example, if my element is moving from one place to another. In that case, we can apply this. If on my element a click is performed, we can apply it then. Let’s say, I have an anchor tag, there is a link. Over that I am taking my mouse, I am hovering above it, at that time if I want to do any event. In that case, I can use hovering Pseudo Class. It means the way my state is there, state means my element is active, it is inactivated, focused, it is unfocused, it is hovering over that or an event is occurring, at that time the selector that we use, we call them Pseudo Selectors. Now, how we use Pseudo Classes or Pseudo Selectors. Its syntax has been given here. Selector, after selector, we have to use a colon, single time colon, after Pseudo Class. Then Pseudo Class, whatever is our property like hover, focused, unfocused, active, visited, etc. That we write here. Means Selector, then colon, then its name and its value, like hover or anything that is there. Then our normal CSS. At that time what we have to change, we will write its property and we will write its value. Okay guys, clear! First of all, we will learn it with the help of hover. What is hover? Hover means on any element when we take out mouse pointer. The event that gets active then, it is called hover. That state is called Hover State. okay!  Let’s see, if I perform it practically. We will open Sublime text and we will generate a program for it. “Example Pseudo Selector”, save, pseudo selector.html. We will run this program. This is my program that is running, I have zoomed the screen. okay! Let’s say that we have to do something over hover. So, I take normal p tag or I take one div. div, class, background-light green. This is my class, in that I take a p tag, in that I write “This is a div tag”. Save. Okay. So, my div tag came here, this is my div tag. So, now we will change here a little. Let’s take style, since I have generated class, I will use period, background-light green. In this, we will give the background color as light green. We will make it a little big, so we give it a padding of 10pixel. So, this is my entire division and this is my div tag.  Now, in this I will also add color, white. It is not visible so we will remove the color. So, my background is light green and the text is black. Text align, center. So, this comes ,the center. We have currently made a normal division. We have made a normal division; background color and in the p tag, we have added some text. That’s it, we have not done anything apart from that. Okay, Now, over that we have to add the hover effect. Means my Pseudo Selector which is there, hover. I have to add that. What will I do? When I go to this division, I want to fire some events and make some changes. Let’s say, how do we do it? We will take the class name as it is. Okay. Then colon and then hover. While hovering, let’s say I want to change the background color. I want to make it red or something like that. I will take cyan. Okay. And in that case, I want to change the color, white. Means the background color should change to cyan. And my font color should be white. That’s it. I will save it. And now I will reload it. Now, that I am hovering over it, you can see that my Div’s color is changing, so, this is my hover effect. Got it?  Whichever elements I have given hover effect. Which means when I take my cursor over it. Whatever changes I have to do, the properties that I want to apply, I can do it here. Currently, I have only made the font and the text color. So, that is what we are doing there. Apart from this, there are many such things that we can do on hover. Like this Pseudo Selectors, we will also see it ahead. With the help of Pseudo Selectors, we can do many things active ; like we can make it event based, with which our web page also looks very dynamic. So, this was our hover, when we take our mouse on some element, we hover the mouse. At that time that event gets active. we will go into the slide. This was hover, now we will go to active. clear, okay! Active means when our element is in an active state. So, normally our anchor tags perform an active state. So, let’s say I take one more div. Div, class, anchor. In this, we can use the same or the light green class that we have taken, we can even use that. We take in this ‘a tag’ and we write here “This is a link”. In this we take target_blank (target underscore blank), so that our site or web page opens in a new tab. So, I want to open the Learnvern site. So, leanvern.com. so, we will copy our URL and we will paste it here. Okay. So, save. So, this is my other division that has come, I can see the color when I hover over it. I don’t want the hover effect. So, instead of the background light green, I will take an anchor. One new class, background- anchor and inside that same, let's keep the background white itself. Okay and text align- center. That’s it, so this is our link. Now, the default property of anchor tag is that when we hover over it at that time our mouse pointer changes to cursor. So, this is its default property. okay! Now, what we have added here is that, we have given a URL here, that will open in a new page, that’s it. So, let’s say I click on it. When I am clicking on it. At that time, my link is seen in red color. When after clicking it I leave it, at that time, it is opening in a new tab and this color is changing to light blue. Now, let’s say when I am clicking, when my state is active. In that case, if I want to add something. So, inside the background. My  ‘a tag’ that is there, I will give it active. Active is my Pseudo Selector, in that case, I will give the color as green. Save, reload. So, when I click it and leave it, I cannot see my green color. Here, there will be a colon. So, when I am clicking on it, I can see it, green. Means my default property gives me red color, when I click it, now I changed it to green. So, when I am clicking on it, when my link is getting active, at that time my color will be green. So, this was our active, Pseudo Selector. understood guys! Mostly, this Pseudo Selector comes with the anchor tag. Then comes visited, after the anchor is visited. Visited means when we have visited the link. Means once it is active, the state of after being active, it is for that. So, we will take the same thing here, in the place of active we will add visited and, in that case, we will add yellow color. Reload. So, because this is my link which has been visited. So, here the default yellow color comes. Now, I will open this in a new tab. I will open it in a new tab. I will open it in an incognito mode. Opening it in incognito means starting the session afresh. Here in this browser, the session is already running, so this is showing me yellow color. When I am opening it in new incognito mode, at that time my link is blue. I have defined 3 states, one when there is nothing, at that time it will look blue, when I will click it at that time green and when I have already clicked it, when my site is visited, at that time it will be yellow. Okay guys! So, while I am clicking it is green, when I go back, this is done, when I am opening it in a new tab and I am reloading it, it is not showing me as I have opened it in incognito mode. This is my yellow color as this is visited. I am seeing this effect in normal browser. But we are not able to see it in Pseudo Element. As this is my visited. This is closed, this is not giving me the yellow color. So, this is our link’s behavior. Very 1^st time when we go into the system, in any browser and active the visited. It will show us the same state. Let's say ,  I will do one thing. I will add one more anchor tag to this. We will keep the same thing, we will just give this id, non or we will give visited name, “visit”. Okay. Now we will here…since it was an id, #. Visit, inside visited, we will give color- yellow, after giving yellow; save, okay, so we have added a link in our program, we have given it an id ; visit. We have  made visit to visited and added  Pseudo Selector and in that we have given yellow color. When we will add in our system for the very 1^st time only then it will be visible. So, let’s say in visited, it is showing me default yellow color, which is something wrong. So, since our page is already loaded, that’s why, and we have even clicked our link. So, every time it will show us in yellow. In case, if I open it in a new tab, In the new tab as well it will show us yellow. To remove this if I comment my visited property. I will see it as blue again, on clicking, I will see it green, now I have already visited it. That is the reason why it didn’t become yellow when I reloaded it, as I have commented it. If I remove the comment and then load it, then my visited property is set with it. That is the reason, I will see it in yellow color. If you want to check it through our inspect. You can even inspect it. Right click, on inspecting, there is a hover property written here. Hover in the style. When we click on it, our activities that are there, here on hover we have given green color. So, we will see that here. If we have given any focus, we will see that. If we have given active, then we will see active here and if we have given visited then we will see visited. Whichever property we have defined, we will see that. For example, in our example, if it is active than green, if it is visited, then yellow is defined. So, this same thing, we will open in incognito mode. Okay. When I click it, I can see it is green. When I inspect it in hover property. when I active it. Means when we click it, my active property is green, so I will see it green here. If I make it hover. I have not given anything in hover now. But if I give, I will see the hover color here as well. If I click visited here, this is seen in yellow color. Means my properties are there. That is what we can identify with this. When we click on hover. So, whatever changes we have applied to hover, that we are getting here, so this is my hover. Clear guys!   So, through inspect all our properties, we can see what changes, what Pseudo Selectors, we have applied. We can check this through inspect as well. We will go ahead with our site. After visited comes Lang, Pseudo Selector. Lang helps us when we are working with multiple languages. For example, here we have taken p tag’s example. And in this, Lang attribute is used. In this Lang attribute, we have given fr. That means that where ever in Lang, there will be fr, there we can use this Pseudo Selector. For example, in this program or I will take some other program. In Pseudo Selector, this Pseudo Selector was of active and here there is hover as well. So, in this itself we will add a new one. We will remove the unused once. Okay, save and run the program. Okay. So, here below this, we will add it. We will add one p tag, “This p tag is without Lang Attribute”. If I write it with Lang attribute. So, here I have to give Lang “fr”, you can add any name you are comfortable with. I have taken fr here. How will I check it with Lang fr? So, P, Pseudo Selector, Lang and whatever is the name, that. If we see in the slide, we have taken fr. So, that is fr. Now, in this where we have taken fr separately, there I want to give blue. We will save and run this program. So, where there is without fr, I am getting my text in normal black color. But where I have taken with fr, there I am getting my text in blue color. This is my, with fr and without fr difference. clear !  Next, we will go to focus. Focus means when we are focusing on some element. Then how our element will look. Let’s say, in my program I define one input attribute. Input type=text. Name=first name. Let’s save it. Here, my input has come. Now, I will add a placeholder, placeholder first name. So, here I am seeing the 1^st name. Now, my Pseudo Selector is focus. When I focus, at that time I want some changes. So, for that I will do input. When my input is focused. we will take focus. In this I want that my border should be a little thick. So, the border should be 10px, solid. Okay. Now, I will reload on this. Now, when I focus on this. You saw that as soon as I focused on it, my border became solid by 10px. When I go out focus, my border gets removed. So, changes when focus and changes without focus. Here, we have given border shadow, box shadow, color, width. You can apply the changes on focus as you want. So, this was focus. clear!  Next is our First-child property. We have multiple elements available. If we want to apply any CSS on the very 1^st element. In that case, we use this. Let’s say, I add a few h1 tags. Or else I will write it in a new program. HTML. Example, First Child Pseudo Selector, save, firstchild.html. In this, I will add a few h1 tags, “This is h1 tag”. We will copy it multiple times and paste it. So, this h1 we had Pseudo Selector. First-child is our program name. So, we are running the program. So, we have shown the h1 tags multiple times here. Now, I will apply here one CSS. In h1, “first-child” like, it is written here. First and then hyphen and then child. That I want to show in red color. So, I will add here red color property. As soon as I reloaded. My rest of the h1 tags are looking as it is but my 1^st h1 that is there, has got red color. So, this is our 1^st child property. So, as many, multiple properties I have got, for that it will be active only to the first-child. same way, in the  nth-child property. In the first-child, if we are making only the 1^st child active. In nth child, to which element we will give this property, for that nth child property comes. Got it?  Let’s say, I write the same program here; Nth child, Pseudo Selectors. Okay. Here, we will save it as nthchil.html. Okay. So, here will come our nth child. Okay, this is my program of nth child. From this, I will remove my first-child, Pseudo Selector and nth-child. In the bracket, let’s say that I want to show my 3^rd h1 in red color. So, in the place of n, I will write 3. And I will reload. So, it is getting active on my 3^rd. For the first-child, the value changes will be applied to only the 1^st one. In the nth, the number that you have specified, the changes will be applied to that. clear?  Let’s say I have to apply it to every alternate. I can pass it here as 2n. Like they have given the example here. Nth-child, 2n+1, if it is given here. If I pass 2n and I reload it. Every 2^nd, 1^st will remain as it is. But 2 into 1, that is red, 2 into 1. So here, our 1^st heading tag, we will get it in black color. Then, 2^nd in red color, 3^rd black. So, every alternate. How much ever we are getting in even number, the heading tags, those we are getting in red color. If we change it a little more. If I add her 2n+1. So, I will get here on every odd number. 1^st, 3^rd, 5^th, in this way I will get my heading tags in red color. This is the way how we can describe it with the nth-child property. Clear!  If you want to make a formula applicable here in the slide. Here, they have given 2n+1. Background color- yellow, color- black, font size is given 30. So, let’s say, if we same apply here. Background color- yellow, then color black and the font size 30. So, let’s say, we apply here the same, background color- yellow, color- black and font size 30. So, this will apply to…let’s say 2n+1 is given here, so on every odd position, we will get h1 in this way. Let’s say, I make it 3 here. So, what we are getting here is, every 1^st and not the 2^nd, 3^rd and every 4^th. 3n+1 means, 3 multiplied with 0+1, 3 multiplied with 1+1. Means 3+1, that is 4. So, this is 4^th one, when it 0 then the 1^st one. In this way whichever function that you want to apply, that you can place in the nth-child property. It will give you the answer in that way. So, this was our nth-child property. Got it guys!  This property we have used on the heading tag. Apart from heading, we use it on table as well. Because in table, we have multiple rows that are generated. If we want to highlight any specific row or any specific column. So, for that we can apply the nth-child property. This was our nth-child property. So, guys in our today’s segment, we had seen a lot of Pseudo Selectors. Hover, Lang, Visited, Active, and at the end we have seen first-child and nth-child as well. All of these Pseudo Selectors, work on certain conditions. First is the state and the second is the condition. So, it works on sate as well like Hover, Active, Visited. All these are states. And the nth-child properties that are there, that is our condition, is it 1^st, 2^nd or on which all elements we have to apply our CSS. In that case, we will apply nth-child property. So, all these Pseudo Selectors that are there, when we generate the webpage. On any condition basis or state basis the effects that we have to provide, for that we use it. So, guys I hope you have understood in our today's segment, when we use Pseudo Selectors and how we use it. If you have any doubt in the segment, any question, query or difficulty, you can tell us on forums.leranvern.com. We will rectify your issues as soon as possible and revert to you. Our next segment is on Pseudo Elements. What are Pseudo Elements. Like we had seen hover, we have more such Pseudo Elements available with us, which come in multiple use. That we will see in next segment.