‫Hey, there.
‫Welcome back, Siobhan, the site.
‫Now let us understand our next important topic selectors.
‫It's pretty important.
‫And let me give you a brief idea about it.
‫So whenever we are working with tons of HQ Al Gore, we need to select the right Doug Right element
‫to apply our design.
‫Since now, we have tons of content.
‫There are chances that we are going to have same class names, so we have several same class name now
‫or same content.
‫And then there are chances that we have tons of order and we cannot apply it to each and every line
‫of code.
‫So that's where this topic comes into picture, which is selectors.
‫It's an in-depth topic and we are going to discuss about it.
‫We are going to discuss the most important things, Dodd said.
‫That has and then practice it with the game.
‫The first thing is, whenever we are working with this whole code, we need to select the right tag
‫on which we need to apply anyway.
‫So I suppose if I want to apply an effect, all the AMG tags, I will select this I am your dog directly.
‫But maybe if I want to filter things in-depth, then maybe I start working with glasses.
‫Maybe I start working with ideas and keep on falling.
‫So that's how these selectors are important.
‫But remember, these are not restricted to these two or three things that as IED class and these bags.
‫They are more than that.
‫Let's start with this now before moving forward with this topic in-depth.
‫Let me quickly give you the understanding based understanding of what I have done with this whole web
‫page.
‫So let me try to minimize them.
‫Yeah, I've created a body inside that I have three section, which is header mean as well as water
‫inside my head that I added on navigation, which includes my image.
‫That is my logo.
‫And then my edge back, which is my tagline.
‫I also added some glass so I can refer them easily.
‫Here I have logo glass, as well as my tagline Glass.
‫And then I have ideas and collagen.
‫That's a that's all about Dada.
‫Then here I have my means section that actually includes two sections inside my main.
‫The first section is about our blog post, and then the second section is related to contact us.
‫So here in our blog post, I have an article.
‫Then article includes Header, which is my H1 heading as well as image.
‫And then I have two dogs.
‫That is something like a description.
‫And then I have divided into multiple divisions that include some heading about age group that can be
‫some bullet point.
‫And then I have three dogs and then the end, I have some paragraph that's done.
‫That's my article.
‫So that's done for my section and then a five second section in which I have heading some paragraph
‫up from another paragraph that said, simple, I created so much of code so that we can experiment with
‫different properties as well as understand select properly.
‫Then I have a folder again, just our logo, our tag line and then some list list item.
‫So I have a home about contact us and registration link not set.
‫So I have created these three sections and we are going to play with the basic thing.
‫Nothing fancy, nothing difficult also, or we have discussed all of them.
‫Also.
‫Since now, we have some room to play with different settings.
‫Also, you can download this wine tourism section.
‫So let's start our journey.
‫The first one is selecting things directly by our dogs.
‫So maybe if I want to select all the images on my file, on my web page and then change their size,
‫or maybe I want to select all the extra tags or maybe all the extra tags, I can do different tasks.
‫So let's start with this and let me select all the images for now and.
‫Change their face so I can utilize work and I can save it, that's 300 picks, and then I can select
‫height and set it to 200 pixels.
‫Save this one.
‫Get on to my web page.
‫Here you can see I got different sizes.
‫That means 300 by 200.
‫OK, this looks fine, but I don't want this since I want my logo to be off 50 150.
‫But for my feature image, I have some different plans.
‫What I can do is instead of using this image, I can select things with glasses so I can use my glasses
‫and I can utilize my logo.
‫And had I canceled my event as well as hike, so it is going to be a pixel and head high, that's going
‫to be pretty pixel.
‫This looks fine.
‫Let me get back here.
‫OK, much better, but again, then we have this provided image.
‫Scroll down.
‫OK?
‫This is better.
‫I want to improve this image.
‫Also, what I can do is I can select my feature image.
‫What has returned the image?
‫I give this blog post image I name, so I give this as featured image.
‫All I have to do is select this idea.
‫Actually, I can take it back.
‫So take this idea and then I can select work as 300 pixel.
‫And then hired as 200 and.
‫Save this one.
‫Get back here.
‫OK.
‫This is going great now we have some information about only three methods.
‫Now there is one other one, which is universal selector, that means select every single thing.
‫So if I use this asterisk?
‫And then if I try to do anything, it will affect my complete Web page, so maybe I change colour,
‫default font color so I can use this color option.
‫And by default, let me try to change the color of our entire web page something that has dark, maybe
‫select gray for now.
‫And if I save this one, get back here.
‫You can see now everything has changed all the text.
‫Every single color is changed to gray.
‫That is, by default, text color change to gray.
‫Now this is important.
‫This helps us to give us universal control.
‫Maybe I want to set a default size up on to something so I can select the font size here.
‫And I can or maybe 30 bucks so we can see the visual change.
‫And if I get back here, you can see everything is too big now.
‫I hope you got the idea what we are trying to do.
‫So that's how this universal is important.
‫We can control a lot of things because of this and also we can do some default setting for our web page.
‫So if I said default theme maybe or color as green, that means every text will be great.
‫We can then override by adding custom CSIS to their classes ID as in 96.
‫So this is important.
‫So that's all for basic.
‫I hope you got the idea.
‫There were before one dogs, then directly with my class, had my I.D. And then, you know, I sent
‫a letter.
‫Now the next one is important, which is known as grouping.
‫Select that.
‫So suppose I want to add changes to H1, and I want to have all each one hurting as something related
‫to Blue.
‫Similarly, I want something for H2 and so I want H1 to be blue and similarly H2 that should be blue.
‫Here, let me add this H1 and I can add this color and something related to blue.
‫This is fine.
‫And similarly, I want it to be blue also, so what I'm going to do is I'm going to use color and same
‫value.
‫Our head, if you look at the changes, you can see they are in blue now.
‫So if I want to do something similar for others, I don't need to write them individually.
‫What I can do is I can utilize a comma and then use edge to head.
‫So instead of writing this differently, I can just grab them.
‫So if I want any other dog, any other element that I need to capture the exact same property and value
‫what I can do if I can utilize this grouping, maybe I one for H3 also, so I don't need to write manually.
‫For all three, I can use a comma and then just define the name of that element, or I choose this selector.
‫And that's how it is going to work.
‫Maybe it can be anything related to class and it can be anything related to it.
‫Also, I can then write for each three anything else.
‫So maybe there are several other properties here.
‫Maybe not just the color, but there can be anything related to background or there can be anything
‫related to water also so that our concerns that we have multiple properties, but later on, I want
‫one extra property for history.
‫I can write it here.
‫So maybe I want to change the font family, which is related to the style of one that you are working
‫with to.
‫These are all the really heavily one family and I can directly select them.
‫And that said, so all the common changes of age three are captured here.
‫But if I have some specific change, I can also add them here.
‫That's how it is going to work and both will be applied.
‫So I hope you got the idea, what I was trying to do with this grouping thing.
‫It's pretty important and we are going to use that a lot on this one.
‫I hope we got the idea.
‫Now the next one is going to be important, which is known as Combinator.
‫Why that important?
‫Well, because they help us to select things, or I should say, target filter things precisely so I
‫won't select anything.
‫I can utilize these combinator.
‫The first thing you need to understand head is parent child relationship, and that's why I have created
‫this big section.
‫So if I say, what is the parent of this be that it is going to be this day?
‫But if I say, what is the parent of this do, it is going to be this article.
‫So you need to understand, did Dyadic parent and child relationship?
‫It's important.
‫Now let me ask you what is dissembling of this H-2 so supposed sibling, as well as this be sibling?
‫So whenever everything is inside a particular tag, they are sibling.
‫Similarly, her hair is trembling with this feedback, this feedback and this div tag and keep on falling,
‫but remember there is no relationship with this H2 in this header.
‫So you need to understand this direct relationship, which is about parent and child and sibling.
‫The next one is about and sister, I know I'm going to leave, but it's important.
‫Once you understand these things here, it will help you a lot.
‫So let's discuss about this.
‫And sister, I should say.
‫This article contains everything, so it contains every single thing from head to head.
‫So all this content is inside article.
‫I hope you got this idea.
‫So article dogs contain everything, but article your dog is not the parent of this H2 article Tiger's
‫ancestor?
‫Definitely one experience for this head experience to this dog, this dog, this deep tag, this step
‫back.
‫My article dog is not dependent on this issue.
‫They've tag is only Deberian, so you need to understand.
‫Article Tag is definitely an ancestor for H2, but not the parent.
‫Make sure you understand about this.
‫OK, that's the whole topic about the family tree, but this is important since we are going to discuss
‫a lot of things on how to select.
‫Now, first concept that we need to understand is definitely the article one.
‫So suppose I want to select all the beauty pageants I in my article, what can I do?
‫Is I can utilize the space.
‫So I have article conduct an inside that I need to select all the feedback so I can add a space and
‫then be back.
‫And that's it.
‫So this space is important here.
‫What I'm going to do is I'm selecting all the feedback inside my article.
‫So article is an ancestor.
‫And B is all designed not just to direct child, but indirect child.
‫Also, all details which are inside this article will be selected.
‫So let me try to add a property here.
‫Maybe just change the background color for now.
‫And here, let me try to use Aqua.
‫Save this one.
‫Get back here.
‫You can see all the child inside the article is selected.
‫So this will be selected.
‫This will be selected and this will be selected as well as this one is also selected.
‫So elect me at two three lines here.
‫So you will have information about them.
‫See it back here, you can see it from this point till this point.
‫All the peacocks are selected.
‫So that's the first one, the second one is J Combinator.
‫It's also important when we want to select the direct child at this point of time.
‫If I was using Article, I was selecting all the all details not just to direct, but also the grandchild.
‫Now, if I want to select the direct child, only only this direct child what I need to utilize it instead
‫of the space, I need to utilize the greater than symbol.
‫Now, if I save this one, this is going to select only the direct child.
‫Get back here.
‫You can see this was direct child, direct child, as well as the direct child.
‫I jump back here you can see one direct child, one article to direct child, four articles and three
‫direction or article.
‫All of them are inside this bag.
‫So devastating for them.
‫These are actually grand total, you can say.
‫So that's how this giant combinator is going to work.
‫Then we have general sibling suppose after this header, I need to select all the ducks, so all the
‫siblings will read this one as well as this one.
‫So most if we have a new big dog inside here, that will not be our sibling.
‫So remember, for Haider, this will be a sibling as well as this dog will be assembling, nor did this
‫one.
‫So I hope you got the idea.
‫If I need to select, all I have to use is select the header first and then use this symbol and then
‫on her, let me try to use some background color.
‫Maybe this one.
‫Let me save and get back here, you can see after my header all these two bags are selected.
‫Remember this important point?
‫It is going to select only these siblings after this heart attack.
‫So suppose if I have a big dog hair, also, this will not be selected.
‫Only the siblings that are here after this, so they will check this.
‫Nope.
‫Yep, this one.
‫Yup, this one.
‫So that's how this is going to work.
‫And it's important because this will help you to select things on your level.
‫This is done.
‫How many more are?
‫Now, the next one is a decent sailing in a previous case and generous general in case we were selecting
‫everywhere.
‫So suppose this header came and then these few that came and then this big game, then this brave game,
‫so we selected all of them.
‫But suppose I want to select the paragraph just after my header.
‫So if there is any paragraph just adjusting to that, just after that, immediately after that, we
‫can do that.
‫We can utilize header directly.
‫And then we can use this plus symbol and then whatever Tiger, you anyone here?
‫Not just dogs.
‫We can have classes.
‫We can have it.
‫So now I can apply.
‫Any property may be background color here also, because it's easy to mod things or visualize things
‫and select the dog.
‫Saved this one.
‫Get back here and you can see only the direct sibling is affected, only this one.
‫So that's how this is going to work.
‫It's also important you get information how to select direct sibling.
‫Now, one important thing suppose if I had a dog had.
‫No, be just that operator, I have this it's too bad.
‫No, because then I'm not going to select anything you can see.
‫This attitude tag is as it is, and these are in effect because of our giant selector.
‫So now we don't have any background with dark gray that was related to our existence of being selected.
‫Now, this is a common thing, you don't need to remember them as you practice, so you will have understanding
‫about how to select things.
‫Currently, you can imagine that OK, in our class here and then I can add an ID here and then select
‫this directly.
‫But once you have done so or you cannot do that, you will get confused and there will be this big estate
‫or CSI, which is not recommended.
‫You want to optimize things, you want to have optimized code and you don't want to write extra things.
‫The problem with writing extra content extra properties is that when you build things or when you deliver
‫things to on your server, it's too bulky and when you are big things you don't even remember.
‫OK, this idea that it all.
‫Then the second it is at the bottom, it's going to be too confusing.
‫So that's why we understand these letters.
‫It's a good habit you will learn as you practice.
‫Now there is one other important thing with this combinator.
‫When we want to select a combination of different classes or ID, suppose I want to select Edge to tag
‫that has a tag line.
‫So that means that if I want to select a student with Tag Line John on this tag line class can be with
‫anything else on.
‫So maybe this tag line is with this one also, but I want to select only a true tag with this tag line.
‫What I need to do is I need to utilize this new community, which is element or element.
‫So what I can do is I can use a student and then dart and then whatever the class name is, which is
‫going to be my tag line.
‫In this way, I can select the edge to specifically with this class, not had this element, not element.
‫That means if I need to select any other element with any other class, I can do that.
‫Maybe I want to select tagline with fodder.
‫That means I want to select a class which has old tagline as well as what are what I can do is I can
‫utilize this same thing.
‫Select Tag Line.
‫Don't forget.
‫So this will select all the elements that has dog tag line as their class as well as -.FOR.
‫But as the class may be held, you can have something that required you.
‫Maybe this was not the case, but you had something like aioli equals scoop footnote.
‫And this was the case then you need to utilize this concept here, and we try to add on background color
‫so we can see the changes.
‫Save this one and had I'm selecting this to.
‫You going to see?
‫So that's the power you can say we can customize and we can select things directly, it's important
‫at this point of time, no.
‫But as you move forward, chances are most of these students are not aware about how to select all of
‫these.
‫So that's it, that's all for this lecture.
‫This was important.
‫Make sure to practice, make sure to download the initial file and then do all of these together.
‫I have tried to create multiple cases here and you can select all of them.
‫So that's all for this lecture.
‫Now, in the next lecture, we are going to play a game and revise whatever we have learned along regarding
‫selectors.
‫Thank you for calling, and I see guys in the next one.