Master CSS Combinators in Hindi🔥

Hello, what's up guys? My name is Pinod Badu Thapa and today in this video, we will see CSS Combinators in Hindi. Believe me guys, this is going to be a very awesome video and I will tell you what are these CSS Combinators. Alright guys, so you can see that I have made a very awesome note, I will share it with you in the description below. So what is this CSS Combinators? So basically, the meaning of Combinators is that whenever you want to style anything in your website, we do it with the help of CSS. So for that, we use some operators or some symbols. Sometimes even a simple space is also known as your Combinators in CSS. So let's say that I want to style a paragraph which is inside the div. So how will we target? Div, Space and then Paragraph. Let's say in section hero, we have an image. So section hero and then I used an image. See, I have kept a space in the middle. This is something to keep in mind. That we have a space in the middle. And whenever there is a space, it is known as your Descendant Combinators. Even if there is a dot or a hashtag after the space, it is known as Descendant Combinators. I know guys, 90% of you didn't have an idea that the styling that we are doing is known as Descendant Combinators in CSS. Where there is a simple space in the middle. So this style is known as Descendant. You must have seen the Korean series, Descendant of the Sun. So guys, in second, we have something called Child Combinator. You can see this. This is known as Simple Child and then Combinator. So what does this mean? Whenever you want to target a single child. Let's say we have this div. In this div, I want to target only the direct paragraphs. So guys, we will use the Child Combinator. And the best part, I have already written the proper definition of each one. So you can read the definition here. Then at the third, we have this Simple Adjacent Sibling. Where you must have seen this plus symbol. You must have seen the plus operator many times. And you must be thinking, what is this plus operator doing in CSS? What does it mean? Now you know, this is known as Adjacent Sibling. In Adjacent Sibling, you must understand one awesome thing. If you look carefully, we have this part here. It says, this Adjacent Sibling, Combinator selects an element that is immediately preceded by a specified element. This is very important. That is immediately. This immediately word is very important. Because, whoever you target, Let's say, there are 5 paragraphs in H2. The first paragraph will target only that. And it will not target the remaining 4. But if you want to target complete siblings, 5 paragraphs, And for that, we have this General Sibling. So I know guys, this theory is enough. Now I will explain it to you. And I will show you practically this Sibling and General Sibling. You may still have some confusion. But we will see it one by one. Now we have this Descendant. You must have seen Descendant of the Sankorean series. So I will tell you what is Descendant. Let's say, we go to the top. We have this Navigation. So look carefully. We have this header. In header, there is a navbar. And in navbar, there is an anchor tag. Let's say, I want to target the anchor tag. I will do it with the help of Descendant. Look, it's super easy. I will go here. So guys, I will zoom in for you. So now, first we have Descendant. Where we have a header. And then guys, I guess we have a navbar. In that, we have an anchor tag. So it doesn't matter that your header and navbar are basically two steps. It can be multiple. Header has navbar, navbar has ul, and then anchor tag. So I want to make its color red. So now, if I go here. This is the website that we are talking about. Here you can see very clearly that this part is red. What was its color? It was red. And this website, if you are thinking when I made it, where I made it, I will tell you. You can see it in the courses. Here is the complete frontend. You can easily get and download it. Alright. Let's come back to this. So this is called your Descendant. Which we were doing normally. But now you know. Now we have a child combinator. So guys, let's go to my biodata. Let's say I want to style both my paragraphs. That is my biodata over here. So this is my biodata. Div, we have this h2. Paragraph, and then paragraph. Let's do one thing. I am copying this here. Let's make one more div. Let's put one more paragraph in it. This is the testing para. Alright. As it is, I have written because in my biodata, this paragraph and this paragraph are as a direct children. In my biodata, this paragraph and this paragraph are direct children. This paragraph is in the biodata but it is not a direct children. So you can say it is not a direct children but it is in the biodata. Let me tell you. If you target P in the biodata, let's see what happens. So, we have in the biodata, if I target P and see, the color is red. And the thing is all three colors are red. But I want a paragraph which is only in my biodata as a direct child. I don't want the third one to be red because it is not a direct child. It is inside a div. So, if you do it like this, this is called descendant combinator which we read a while ago. So guys, you have to use this operator like this. This is your child operator. If there is a paragraph in the biodata as a direct child, then only it will be targeted. I know I told you I will show you practically. So, the color of these two paragraphs changed but not of the third one because the third one is not a direct child. The direct child of the biodata is first div and then its child is your paragraph. That's why the color of the third one did not change. So, this is called a child combinator. Then we have an adjacent combinator. We have this adjacent combinator. So, how does it work? Let me show you. Again, let's see. I am copying this one again. I am pasting this one. Now, instead of this, I do one thing here. We have this H2. Okay? In the biodata, only the paragraph was not a direct child. We have H2 also. In the biodata, H2 is also a direct child of the biodata. Then there is a paragraph. Then there is another paragraph. Then there is a div. So, what we will say is that if you want to style the adjacent sibling with the help of an element Go with adjacent sibling operator. Let's say, the immediate sibling of my H2 heading is pink. Okay? In the biodata, the immediate sibling of my H2 is green. Let's say, condolence save. I will go here. Now, it is green. Did you see? Earlier, I targeted the direct child. Now, in H2, in the first paragraph, I cannot use the first paragraph word. I will say, the immediate sibling is targeted. If you want to target all the paragraphs after H2, then we have this So, I will copy this code again. I will paste it. Now, I will use this. Now, it is green. So, you noticed that in the biodata, it looks similar. But, these two have a totally different approach when it comes to your styling. Here, it is about the direct children in the biodata. Here, it is about the siblings of H2. So, this is your descendant. This is known as your child combinator. This is known as your what? Your adjacent sibling. This is your general sibling combinator. I know, many of you have seen these three. But, you didn't know what we call it. How does it work? But, you didn't know the actual practical knowledge. So, guys, how did you like the video? Comment below and let me know. I am uploading videos on CSS because there were a lot of comments asking for the next video on CSS, the world's best CSS course. So, I am showing you how the new media query has come. I told you what we actually call it. So, this is just a trailer to tell you that the CSS video is coming. It will be an awesome video that you have never seen before. Our next target is 7 lakh subscribers. So, guys, if you are watching this video, please subscribe and like this video. Comment below We want CSS course. Alright, guys. Check out this part where the source code sale is going on. Alright, guys. See you in the next video. Thank you so much. Take care.