In the session, let us learn how to combine different selectors and use them in CSS. For this, I have created a HTML page, I have added few tags over here, two paragraph tags to h1 to h2, and the div tag. inside those of I have got two child that sorry, three child tab, two paragraph and one section tag. Now, let us try different combinations. The first thing is, I want to have this paragraph tag and two heads attached to have the same font color for this and going in for group our compound selectors. Let me show you how to do that.

Inside style, I have to specify the tag names itself. So it is p comma H one comma H two color, color green This means then select these tags and apply the font color. This is called as compound selector our group selected an ID already we have seen how to use the class attribute and the ID attribute. So let me add that also directly. So here it is. For class.my class.

Let me add font style of italic. And I will also add Letter Spacing as three pixels. Okay, fine. Next ID for ID what is that hash? Hash. Hit that only for h1 tag I have given the ID so hash header.

Let me add a background color. So only with these three stylings let us try running this HTML page. Right click open in browser About the browser and Sublime Text side by side, let us see the styling. First we try to apply this group selector we are changing the font color to green. So, all the paragraph tags and h1 and h2 will be having the font color as green here inside the div I have got three paragraphs that for the three are also getting converted into green color. Next dot might change the font style to Italic and letter spacing is three pixels.

So far what will happen for this one that is the second line right but then for h1, which is having classes my class so far this year, you can have a look this is having letter spacing and it is converted into entirely and for this h2 inside h2, this one right okay, so this is done. That's my class next header for header background colors. And now of course we can just say Have a look automatically the background color change to yellow. Next, I want to change the styling of this h2 which is having my class attribute. So, how to select it let me come here switch to.my class in this my class I have given the letter spacing of three pixels. Now I want to change it so I can add it over here letter spacing and just changing it to five pixels.

And then we add text decoration underline just to show you the difference. So, first thing is you are going in for generic tags, select all the tags and apply the styling. Then go in first class attribute select all the tags which are having the same class attributes and apply the styling. Then going for unique attributes. Unique attribute is using ID for that we have done either you can use it Are you can go into the tags and use inline styling that is also fine. Next, if you want to change the styling for h2, which is having the same class attribute, call it directly using the tag name dot the class attribute value.

So that's what I have done over here. Now I have given this let me save this, I'll refresh you can see the output All right. So this is for Okay, this is for selecting a particular tag with the class attribute. Next, let us talk about a few more things want to select all the feedback inside the steel container. So how to do it is do stick p do comma p means select both of those and the beta. If you do space p, select all the paragraph tags which are inside the div.

So I have selected it. Now. You Let me change the color. So, that this will be the erasable ECG and changing it to blue. Let me say this let me refresh, you can see select all the paragraph tags which are inside the irrelevant of the parent. In this case, if you see these two are the title tags of this paragraph tag, it is not the direct child of the parent of this paragraph tag this section, but still it is getting selected because you are given the space t. So it means select all the paragraph tags which are inside.

Now, let me show you one other combination do angle bracket see what is the meaning of it. select only the child tags of the data set direct children of those, so which tag will be selected, only these two tags will be selected. Now let me add a styling for this video. Going for text decoration only on the map. Let me save this refresh. You can see only the direct children of the service getting selected.

If you are using angle brackets, Bill angle bracket T, it means select a child tags off the bat if children have do if you give them space D, select all the paragraph tags which are inside. If you give the comma p select both of them and the paragraph tag. So that has some meaning. Now, let us talk about the pseudo selectors. How to identify the first child, the last child, the first of type, the last of type. Let me show you two examples.

So I'm going to use do space P. This means select all the paragraph tags inside do after that I'm going to use pseudo selector p colon for child God exists What is the meaning of it boy in search of the paragraph that you put the first child inside. Now, if you see inside the dog, this is a foster child. And again you can have you can have a look I have got section, inside section also this paragraph tag is there, which you see first chain. Now, let me save this here I will come and add a few styling. Let me add a background color. Now, I'm saving this.

So, which which two paragraph tags will be affected, this is the foster child. So this will be affected. This is also the first child so this also will be affected. I'm saving this. Let me refresh. Can you see, these two are first children with an attack.

So these two are getting affected. What about the other paragraph that they are not affected? The reason is You are given specifically do what will happen if I give it us body. inside the body if that is a paragraph tag which is the first choice, apply the styling. Now let me save this. So the first one always change.

Now I have added two h1 tags, one inside do on one inside section. So what is the first change of the h1 what is the first style of section again h1 only what happened to this part? I have given them space p colon first shape whether the background color will change a factor to this these two children that is to these two know the reason the fourth child is getting changed. Let me say I mean let me refresh this. You can have a look these are the two tags which I have added. Now.

What about the speech child of the whether it is getting changed? No it is not getting changed. Now what I will do? I will go and change this incident from Chase, if I use first cup type work to that do check in for a pita wherever the pizza is occurring first, then you apply the background color taco Agra industry scenario, this one will change to Aqua and this one will change triathlon process type means what the first occurrence of this particular feedback inside the do let me save this let me refresh you can see now, these two are getting us Aqua, there is a difference between first change and first of type first change means the first child of that particular parent element type means the first occurrence of that tab within the parent element that is what we shall see. Okay seeing how to use first child for stuff types.

Similarly, let me show you one more last shape those days p colon large change now here the We change the color to orange and I will give Letter Spacing five pixels, okay, which was the last time inside the do tag, this is to complete the task in the div tags, this paragraph is the last change. So, only for this particular paragraph, this styling will be applied in case a first choice it will go inside the child tab of the bill and identify the first shape. So, in case a partial wasn't all we had initially we had this T and this T selected. In case of last check, only the last child within that day will be selected. Let me save this let me refresh. You can see the last child of Section The last one is getting selected.

So this is how you use a pseudo selector. Let me wrap up now in this session we have seen how to use different colors combinations of selectors, we are seeing how to go in for group selector or compound selector by using comma. How do you see class attribute, how to use the ID attribute, how to select a particular element with the class attribute and how to go in for using the child selectors. Using space using angle brackets, we are also seen how to use few pseudo selectors. You can try and research on different pseudo selectors which are available. These are very helpful when you want to give a good styling to your web page.

That's it. Thank you.