‫Hey, dad.
‫Welcome back.
‫Now in this lecture, let us discuss about solar elements and solar glass.
‫So what are they and why that important now?
‫First thing is, I just quickly designed this list, as well as this quick one so we can discuss the
‫whole topic.
‫Symbolist I have these five countries named as well as I have this quick one.
‫They just jump onto the quote part.
‫We have three dogs as well as this on our list inside our new and had I have a quick farm with import
‫label import label as well as button inside or do not set a no styling is applied.
‫So just border walks defined as by default, 16 pixel.
‫OK, I hope this looks fine.
‫Now here we utilize them as a selector.
‫What I mean by this?
‫So there are several times when a button or any other property are in special state.
‫What example if I click here, I want this to be blue.
‫I want this to change and do something.
‫I cannot do that because by default, if I select input this input, this will change the current state.
‫But I want to change this date when it's clicked.
‫Or maybe I just want to change this date when I want or what that means when I am on the top, but I
‫haven't played it.
‫Remember when I am on the top, that's where I need to change the button style or any type of button
‫design.
‫This happens with multiple website.
‫When you hold over them, they increase their size, or maybe they change their color, or maybe the
‫font size increases.
‫So that's where our coming together.
‫Or maybe I want when I'm unfocused, I want the color to be changed.
‫So all these styling that happen after certain changes are known as Sulu classes.
‫OK.
‫This is great, so choose your glasses means I want to select them in a special state.
‫That's the basic meaning.
‫Now what the Sulu element?
‫So maybe I have multiple elements, and I want to select specifically one.
‫Suppose I if I say, OK, give me all the elements from this, you will say I'm going to get all the
‫elements.
‫Now I can directly say, OK, just ended the first one, or maybe just select the first one and apply
‫some style or maybe selected part, agile or fourth child.
‫Whenever we are selecting these elements only with some specification, maybe force child only or third
‫child only authenticated only.
‫This is our last solo element.
‫That means we are just selecting an element.
‫But when to look as appears, we are selecting US patients deep.
‫I hope you got the basic idea, but even if you are not understanding them, we will understand them
‫through example.
‫One common example will be double colon and single colon that will help you remember them.
‫Let's understand what is happening here.
‫So first, I'm going to apply the changes related to smaller classes.
‫Suppose I want to hover over this button and change the color.
‫So what I'm going to do is I'm going to select the button and I'm then I'm going to use these cologne
‫and how you will see multiple option.
‫The double colon are pseudo classes and single Cologne will be pseudo element.
‫You don't need to remember this.
‫I am again informing you you are not going to really use these words, pseudo classes or pseudo element.
‫You are directly going to say, OK, Howard, that's it.
‫You doesn't get if this is all elemental or class, what property is this?
‫I'm just giving you names.
‫So even maybe in future, you want to read them, search them, or maybe by Johnson and W. M. This.
‫You can directly remember that, okay, what is all about whenever we just jump on to an element and
‫we hover over this tax, our property?
‫So here maybe I can change font color.
‫And let me try to use something.
‫Maybe this one for now soon.
‫Get back here.
‫You can see it's changing.
‫This was just a demo example.
‫We can do something they don't think.
‫So let me try to use color as white and then maybe background color.
‫Let me try to use something as dark.
‫Maybe that's one, then maybe we can add border radius and maybe add zero point five for that will be
‫a pixel approx.
‫And then we can add some padding and margin.
‫So if I get back here, nothing is happening, but I have my power over this.
‫You can see if sending.
‫So let me get back here.
‫Let me change the border.
‫And I can turn water off same color that I'm trying to use during homework.
‫So let me try to use a much lighter color.
‫All this is great.
‫Model one fixer solid.
‫And this is going to save.
‫Get back here.
‫You see.
‫Now this is happening when we are hovering.
‫I hope you got the idea.
‫So this is a great example of how Howard can state.
‫Maybe we can use these property by default, maybe instead of this Howard right now, just see this
‫forgotten.
‫OK, this is the bottom.
‫Let me also add somebody so I can have some extra space.
‫Maybe use padding as zero point two grim saying Get back here.
‫OK, on the top and bottom, let me change the 0.3 and for the other one 0.2.
‫OK, much better now, I can add some hover effect, or maybe let me just do three itself if this looks
‫fine.
‫Much better.
‫So I am going to keep this as zero point three and now I can add our effect.
‫So as soon as Barton got power.
‫I can maybe change the color of this button, so I'm going to change the font color as well as I'm not
‫going to change of one color, but maybe done it a bit darker.
‫So maybe something like this.
‫Get back here.
‫It's stalker, I need to change the border controls, so.
‫Changes to exactly the same that they are changing the background color.
‫You're going to see that side is going to work.
‫So how much effect is important for Borden's, maybe for different Typekit on that item?
‫Maybe when we are using images, we want to increase their size, so it's important.
‫Now, the next one that I'm going to discuss about is related to this focus.
‫Whenever we click there, I want something in background, maybe some walk shadow or maybe anything
‫else.
‫So if I jump on to my input and if I use focus.
‫And you can see I can change the background color.
‫Maybe they should be doing background color or something, which is dark.
‫Poppy, this one appears to say, I see it back here.
‫Harry Franklin, now you can see it's Junior.
‫You're going to see, so that's our focus is going to that means we are going to change the value when
‫we are focusing on them, basically.
‫So this also works well to make our team consistent.
‫So maybe we are walking with something that is dog behind the scene to ask when I have someone click
‫here, I want to change the color.
‫So this is the basic thing and we can do with more properties here.
‫I'm just using background color.
‫Maybe I want to our chat, or maybe I want to change the font color.
‫So by default, if I write something here, it doesn't need black color.
‫You cannot even see if you can argue against him.
‫OK, so maybe I want to change different colors or I can change it to white, save this one and get
‫back here.
‫No, again, this is white, get black hair, black, white, black, white, black.
‫So that's how you can control things when they are in focus.
‫So this is basically how we select things in isolation state.
‫Now had the next example that I want to make is about after and before, so maybe I have this head dog
‫and I want to add something after this.
‫I'm not adding here with my HMO, but through my thesis, what I can do is I can just select where I
‫want and then use double colon and then I can select after.
‫Inside this I can use on be.
‫And then just describe whatever I want to add, maybe I'll just use Dash and remember to pass devalue
‫inside this code.
‫If I see this one, get back and you can see this is it had now head, I cannot select this.
‫The first thing is I can select this part.
‫If you see, I cannot select this.
‫Also, if I jump inside my body and get into when I do see this, I see down here you can see players
‫to travel.
‫But this dash is when my after.
‫So this is where content is.
‫That is my content.
‫And that's how you can add after.
‫So it has multiple use cases when we are working with maybe in future.
‫You work with daily script in the future and maybe you do something else, then it is great.
‫Otherwise you are not going to use basically as a beginner here.
‫I can also use before saved this one.
‫Get back here.
‫You can see an outsider here, but I cannot selected again.
‫This is people.
‫There's also use when we are working with something related to salt water, and so I want you to send
‫some values and you can add it too often before.
‫I don't want to go in detail, I don't, but just keep our focus as a beginner.
‫So this was the things that we can do with after and before.
‫Now let me discuss the important one, which is how to select their child.
‫That means if I'm working with some list, maybe this content that I have a parent and then I have multiple
‫child and my selector depends on this child.
‫So I suppose I say or select this, you will and then select the first light on that means first child,
‫or maybe select this paragraph and only select the first line or something like this.
‫I suppose I have a paragraph here which has not around 50, and I want to select the first line only.
‫I don't want to select everything is.
‫So that's where we can do certain changes.
‫So if I jump ahead and maybe select be had, if you just use one call on and see all the example, you
‫will see force later, then you have first line the previous first line for now.
‫And maybe let me change the background color.
‫And if I use the background color, something else, save this one.
‫Get back in.
‫You can see whatever my screen size will be, it will only apply to the first line.
‫So that's how we can select only the first line.
‫Now, maybe I want to add for Force First Letter itself, so I have this option.
‫Save this one if I can.
‫You can see only the first letter I if you remember the magazines, if you remember the news website
‫that try to only select the first letter and change the font size.
‫So here, if I'm using font 16 pixels, the font size are 16 pixels I can utilize maybe one point one
‫rim something like this to increase my font size if you remember this.
‫They usually have force letter or maybe capital, maybe bold or maybe greater in size.
‫So that's how this is going to work.
‫Now here, let me discuss about how to work with different siblings as well as child.
‫So I suppose on working with this, you will on it has many child and I want to select maybe the first
‫one only among all these siblings or maybe the third one only.
‫What I can do is I can get her select the invite and then I can focus.
‫If I want the divorce child, I can utilize that.
‫Or maybe I can use this option, which is an it child.
‫And with child, I want the first one and then I can simply say, OK, agenti background color.
‫So on, I'm going to use this one.
‫Save this one.
‫Get back.
‫You can see I'm the oldest child that is, and I selected the first one I had.
‫Remember, it depends on this sibling connection.
‫So if I have this list again, save this one.
‫Get back here.
‫You can see both us child are in this whole background color.
‫So this is the very first time this is all before us today for this bit and so only for China, which
‫I really will be.
‫With this background color also, I can use the fifth one and see if I can.
‫You see it first on?
‫Now, I had one important thing.
‫This is an agile.
‫We have other properties also, maybe I just want to select the first one, so I have property for sale
‫and then I can directly the magnolia corner so I can use this across, say, good backyard.
‫You can see the fourth child.
‫There are multiple others, but these are the common one, actually.
‫And you don't need to mess too much here.
‫But this is available, so maybe if you want in future, you can directly read it will debut a few minutes.
‫As a beginner, it's hard for you to utilize all of them.
‫Maybe once in a while you might use force later, Fastlane, Annette or something like this.
‫Also, let me jump onto our game.
‫If you remember this game, we competed in 14 as well as we competed the last values.
‫So if you jump in now selective Rothschild, that is on level 15.
‫Here you can see the US selects select the top orange.
‫That means if this is the list inside our played, we have three oranges.
‫What I need to do is use the orange and then I can directly sneak the first child.
‫There's one then I have option to select the Apple and the pickle on the blade.
‫Now here we have related to only child in father.
‫Also, we are going to have lost child.
‫You don't need to remember them all.
‫Now, had we have any child, so maybe we have these three blades for blades.
‫And if I want to select the third one, what I can do is I can directly select the blade and then pass
‫the value that I need only and it child.
‫And in my parenthesis, I need to pass the third one present to this one.
‫Now, had we have lost child and keep on hauling a member, you don't need to remember all of them.
‫Actually, it is good to just view them.
‫Read about them.
‫Don't remember right now.
‫Maybe whenever you have a specific case to use, jump onto Google.
‫It's free and no one is restricting you.
‫Make sure we are not in school now.
‫We can Google things.
‫No one is restricting us, just Google.
‫Search about things whenever you have any problem now or any topic that you have a problem with, search
‫and see different blogs or any other type of content.
‫I hope this lecture was helpful, and all you understand about these first child fossils before focus
‫how and few other properties.
‫Thank you for calling.
‫And I assume right in the next one.