CSS Selectors: The Complete Guide | Rahul Giri | Skillshare

CSS Selectors: The Complete Guide

Rahul Giri, Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
32 Lessons (2h 48m)
    • 1. Class Trailer

      4:00
    • 2. CSS Terminology

      2:19
    • 3. Element Selector

      4:55
    • 4. Class Selector

      4:30
    • 5. Id Selector

      4:13
    • 6. Grouping Selectors

      5:00
    • 7. Decdent selectors

      8:02
    • 8. Parent Child Selectors

      5:41
    • 9. Adjacent General Sibling Selectors

      6:04
    • 10. Attribute Selectors

      2:50
    • 11. Exact and Any Word Attribute Selector

      7:22
    • 12. Beginning and End Attribute Selectors

      6:17
    • 13. Substring Attribute Selector

      4:18
    • 14. Link Pseudo class Selectors

      6:12
    • 15. Focus Selector

      6:03
    • 16. Required, Optional and Checked Seletors

      5:17
    • 17. Enabled, Disabled, Placeholder Placeholder shown Selectors

      6:04
    • 18. Valid and Invalid Selectors

      7:31
    • 19. First, Last and Only Child Selector

      6:36
    • 20. First, Last and Only Of Type Selector

      5:45
    • 21. Nth Child Selectors Syntax

      6:09
    • 22. Matching Pattern With Nth Child Selector

      6:28
    • 23. Matching Pattern With Nth Type Selector

      3:06
    • 24. Counting Backward

      6:32
    • 25. Root Selector

      4:18
    • 26. Target Pseudo Class Selector

      2:29
    • 27. Empty Selector

      2:42
    • 28. Negation Selector

      5:42
    • 29. Before and After Pseudo Element Selector

      7:05
    • 30. First Letter, First line and Selection Selectors

      5:44
    • 31. Using Selectors with Javascript

      8:38
    • 32. Last Thought

      0:19
14 students are watching this class

About This Class

20 years ago when I could first write the CSS with html document, we had a limited set of selector choices like- element, classes, ids and descendant selectors.

But now we have dozens and dozens of powerful CSS selectors we can use in your CSS to write more powerful, optimized CSS selectors to maintain our stylesheet.

So in this class discover how to effectively leverage the power of selectors to select the elements you want to style without adding classes, changing HTML, or getting overly specific with your selectors.

In this course, I will demonstrate how to pinpoint specific parts (and groups of parts) in an HTML document using the powerful declarative syntax of CSS selectors.

I will cover combinator selectors, attribute selectors, pseudo-class and pseudo-element selectors, and the universal selector.

But that’s not all, there is a bonus video for you where i’ll show you how you can use CSS selectors with javascript to add dynamic behavior in your html document with real world examples.

Topics include:

  • Targeting elements, classes and IDs
  • Working with compound and group selectors
  • Targeting parent, child, and sibling elements (combinator)
  • Targeting element attributes
  • Targeting links with pseudo-class selectors
  • Targeting child elements and empty elements
  • Working with negation elements
  • Styling and validating forms
  • Matching pattern with Nth-child Selectors
  • Creating custom global variables
  • Using selectors with javascript.

Who this course is for:

  • New web enthusiasts and front-end developers
  • Complete beginners who wants to enhance their skill sets
  • Experts who wants to reinforce themselves
  • Anyone who wants to refresh knowledge
  • Web designers and developers
  • Developers who are tired of fighting with CSS
  • Professionals who wants to level up CSS skills


So if you’re ready to be one of the top 10% fronted developers then roll-up your sleeves, fire-up your code editor and let’s get started with CSS selectors- the complete guide.

Transcripts

1. Class Trailer: Welcome to the sister selector. The Complete Guide Class. We're gonna learn everything about sissy selectors with real world examples. So 20 years ago, when it could foster right and use cases in our estimate document with Reasonable brothers support are selected choices are limited toe elements, classes, ideas and descendant selectors. But today we have dozens and dozens of choices off selectors and many more are coming, however, in today's dear the world development. Still, there's a 90% of the dropper who tried to stick with the basis directors only to manage Their CS is and they fail miserably and consistently. They drop classes everywhere in their estimate, document and style it in result their styles. It looked like a spaghetti. And when they try to change one thing only suddenly everything changes and they wonder why . So this class I will make you one of the top 10% of developers who uses new and advances electors to manage their says. It's cold, and that's why we will start with the most important concept. You need to understand first, in order to write most efficient and highly up to my sister's selectors, and that's esteem and family tree, which is the relationship between elements in estimate. For example, in this flow chart, you can see what is the relation between section and paragraph. Well, there's a parent and child relationship. The section is a parent, and the paragraph is a child. And what is what this? Well, they're siblings because they have the same parent and they are in same level. So that's why they're siblings. What is the relationship between this list and bar attack list? Element is descended to this body. It means this body's ancestor and list is descendant. And this class, I'm gonna drill this concept into your mind. So, apart from ceases basic selectors like element classes, ideas or dissent selector, we will go at once, and it'll start with commentators. So this Combinator will allow you to style your element based on their relationship like a parent, child, siblings and ancestor and descendant. After that, I will talk about attributes means how Guinness time, any element based on its attributes or attribute value. After that, I will show you the studio element, and so element is used to style specified part of an element. For example, I'll show you that Haugen dynamically place anything before or after an element. I will also show you that how you can target the only first letter in order to have a drop cap effect in blocks. I will also show you how contract it only first line, no matter what the skin sizes. After that, we'll talk about the studio classes and thes pseudo classes are James in CSS. I'll show you almost all the sort of classes you will ever need to style your farm to validate your form and everything. I will show you really well example. How can invalidate your farms after that? Actually, you also do classes. You're gonna need to style your links. Then I'll show you how can match pattern with pseudo classes using anti child selectors. And I will also show you that how can create your own customer variables in your sister document globally so you could have used that variable instead. And later, if you change your mind, we just change the value in that variable, and it will going to change everywhere in a style sheet and doesn't more advanced selectors . So once you learn all about this ad, one selector you'll be able to select anything without even changing estimate or adding classes. For example, imagine you wanna website in any serious container management system like a workplace choirs place, really, or even an e commerce platform like a Shopify. Obviously you wanna use team for them. And because you wanna use teams, you will not be allowed to modify your estimate document. But that is not gonna be a problem for you. Because once you learn and master this class, you will be able to style your website or your team without even touching as TML. But that's a trial. I also have a bonus video for you. Well, I'll show you that. How can you use thesis electors with Taschen? Because if you do are gonna do front end of the Loveman, then you're really gonna use these sissy selectors with Starscape. And in this video, I'll show you how can you use thesis selectors with JavaScript to add dynamical behavior? You new estimate document with real world example. So hi there. My name is Calgary and I'm writing This sister scored from seven years now, So if you want to be the top 10% off advance front interloper, then roll. Obviously it's for Africa later. And let's get started with the city's directors. The complete guide plus 2. CSS Terminology: So before we move any further in this class, you might be wondering what a selector is. And you might also wonder about other part Off seasons declaration. So that's why this becomes incredibly important to explain. This uses terminology before we dig deep into season selectors because this is electors are perhaps the most important part offseason tax. So let's get clear about what the part about sex education are called. So first digit selector itself. And this is anything which comes before Kali braces. Here. You see, this is an element selector, and it's an estimate element. Or you can say this is an article tag. So this type of selector called Elements Selector and you're gonna learn about elements elector right in the next movie. But let me say a three more basic and violence is the selectors that our classes, ID's and descendant selectors. Next there's a declaration, and the declaration is a single line. Inside these calibrates is you see this foreigner family equal to start. If well, this is one declaration. While this phone size 1.3 them is another declaration, this color has 33 which is a hash court is another declaration. So decoration is one line inside. This calibrates is here. We have total three declaration and there could be hundreds off declaration or as few as one. Now let's talk about deflation block. So decoration block is everything inside this curly braces? Basically, decoration block consists off many individual declaration. So what exactly make a declaration? Well, there's a to side of regulation the left part and the right part In the left, you wanna place actual property like this fun, family form, size, color and in the right side, una place the actual permitted value for that property, for example, For front family, the veiling is sad. If former size the rallies 1.3 them on the color is the value of this hash 33 which is 1/2 scored. So this right side part called value and this is a lap side called property. And because this individual decoration is made a part off bearing property and value, they also called property value Pierre and basically this a terminology is used by other language programmers. But I'm gonna call them property will appear or simple, individually question totally fine. So now that you have understand the course, he says. Terminology. Now let's go ahead and dig deep in tow, ceases selectors, and we will start with the basic selectors, just in case. If you're new to CS is so not from the next movie, let's go ahead and start with elements, electors. 3. Element Selector: So in this movie we'll talk about element selector, and this is perhaps the most basic safety selector you ever gonna use in your front and project. And this elected is basically used for old styling purpose. Let me show you. So this is our webpage, and we have is heading toe this paragraph these lengths than these two images, then these are heading to title on. Then we have this list off TV shows, which happens to be my favorite TV shows. And this is the paragon up. And you say this is that Stephen structure again? We have heading talk paragraph section, incident section. We have these six lengths and then here another section. Then we have these two images. Then you have another section. We have this heading to that an ordered list and then this paragraph, right? So let's say you want to give a certain style toe all the paragraph in our webpage. So we have one and two back enough. So let's say you want to change its color. The re little bit like a hard, darkest Great. So I'm gonna target all the paragraph. Well, you see that this is how you use elements Selector. This is our main element. So we need to get rid of this opening and closing bracket. We only use inside part, which is the actual value in this case Speed. So I'm reading this paragraph, right? And then I can pride General Stelling toe all of our paragraph so color. And if I make it, let's say 555 which is dark asleep. You see that all of her bag that is going to receive this exact same car. And again, if you want to change a clerk off this heading to well, it's very easy. We can go here. We can target heading toe. I let me show you this one. Right? So citizen happens to and again, we not gonna use that opening and closing angle bracket. We just used actual value heading toe. Let's make it color. And this case, I'm gonna make it green. And if I go here, you see that I didn't. We have this styling applied to it, and these are the very specific because I'm just using the court element. And by using this court element now, every heading toe or every barrack graph in our webpage, we're going to receive this color, right? This is very powerful. Even if you want to apply, let's say next. Decoration underlined. Well, just apply here and see every single paragraph on your webpage really going to receive that underline and this color. So let me just go ahead and add one more packet off right here. Let me add five words in it. If I go here, you see that? Now we have another back it up and you really see the same standing. So this is your element selector, which is basically useful The oldest tiling purpose. And you could easily override their with glass and I d selected. And we will talk about it in the next few movies. And this is not eight. Let me just go here and you see that I have this paragraph and inside this program I have another element which is strong, right, and inside strong. We have this season's selector world, so let me just go here. See, this is what I'm talking about. So let me just go here and investigated of it, because this similarly we are to me and you see that now it's perfect. But let's say you want to apply certain styling toe all the strong tag in your project. So, for example, I wanna give it a some kind off gold background so I can target that exact elements front. Right? Because strong is the element here. I'm sure you is a bassist element now I can give it back. Now let's make it Gordon. Now if I go here that every single element who had this strong element will going to receive this gold background, for example, let's say flash right, I can go here and let's make this a flats inside our strong back. Some says trying and then flash if I could hear you see this flash is going to receive that exact back very, very cold. And if you use kind off starscape Famer like angle of the EC or something else, you can create your own custom element. For example, let's say, unless they had product Lee, right? So if you use regular, this is quite common to you and our here, I can add one line off, then once, right? And now if I go here, you see that we have its product name stuff, right? I mean, this is not a product name. This is kind of boring description, but you get the idea, and now what I can do. I can copy this exact element. I can go here. Then I can provide any styling Irish. So I can say here, let's say color And in this case, let's make it like. And if I go here, you see a lime applied toe. This our custom element, and this is incredibly powerful. And this is your element selector. You just need to select the actual elemental value. Grab it here and style it, By the way, Element have a specificity off one classes have a specific of them, and then I d have specialty off 100 you will learn about these classes and Heidi in the next few movies. In fact, let's go ahead and talk about class elector in the next movie. 4. Class Selector: So in this movie we'll talk about the last selector and this is incredibly useful selectors in CSS. In fact, 90% of the time when you work on the redevelopment project, you gonna use these selectors. So these are incredibly important to understand. So what is the difference between these element and class electors? Well, there's quite a few, but the main difference is that in order to use this class selector, you need to use this class attributes and then the attribute value, which is a class name in this case title. So when you walk with elements, elector, you will make use of this actual element. For example, heading toe paragraph section, ankle ing, and so on. But in order what with class? We need to use this attribute value proceeded with period sign. Let me show you if I go here and if I want to target this title when I go here and I use this period sign and then the attribute value off our class discus title Macia title and then I can put my styling for example are said color. Let's make it red. If I go here, you see that now made our esto color red. So just like this, I can target this class links. Let me just go here and here and say dark licks. And here I can give me the bag around. For example, this black If I go here, you see that now our entire links section got this black back down. And that's happening because I have talking to this class. So it's super powerful. You can use this class to make Aton off or something off example You see a dark later I had these paragraph right which have a class of text. And then you see that there's a span tag which also have a glass of market. So I you know, I can just scrap this market class So it's a lot which obviously a class at that time I used to be a sign and I see a market right and here I'm saved lives background to be gold. And now they go here. You see, it's got a gold background also played right here in TV show and I say span and here DV show and then let's give it a class off market. So it's super super handy, and you say that regarded, in fact, the most popular sees its former like a boot strap foundation materialize. MDL uses this class selector extension early in their project, so it just need to apply one class and everything is gonna take care for you. So let me just show you example. So, for example, let's say in bootstrap, there's a primary class I can say here, primary color, right and probably color is crane off a blue, so blue right on. Then we have this success color, right, so against their success color and that's green. So these are the more bootstrap classes. So know what I can if I want to apply this primary club, I can copy and I can go right up here. And I can just say he had class. And let's make it a family color and crazy that it's turning to blow. If I make this success color, you see this one right? It's going to turn into green. You see it on the green. So this is the power off classes. This is an incredibly important understand, and by using them, you can create your own CSS framework. But if you want to make it even more readable than if you just go here. And you see that here? I have targeted this title which was priestly this title, right? So let's go ahead and make it again. Title here. Right. So now you see that indeed up targeting this title and sculler is ready. I assure you, there's a color red. But now it's not telling me that we had I'm applying this color. Well, obviously entitled. But what is this title? Well, what you can do? You can be little specific. You can see that's two or heading to. So he had to say Etched daughter title and not figure Harry, you'll still see the same. But he discord is not readable. I'm saying here Okay, find all heading toe, have the class of title and then applied this colors and that this court is quite readable . And also my respects fit for example Let me just do something here. So let me just get it off it. And here you see that now I have this title. So now what happens if I just go ahead and pack it? This title And now I'm tripe or the color in this case Let's make it go. Know what? You think That this style is gonna write this one? It is not. Why is that? Because this element have a specialty of fun. And this glass of dismissed here 10. So total there's a 11 specificity, but not this one is only class. So that's why it only have 10 it spasticity, which is a less than this one. So that's why this bill is still going to win. And this is your class selector incredibly powerful, incredibly useful. 5. Id Selector: So this will be We will talk about ideas, selector and this is similar to class elector. But the only difference between this idea and class Lecter is that character that proceeded with the attribute value. We will get back to it in a second. But first, let me show you that how can apply an i d to an element. So here, just like this classic tribute, we have idea tribute, and then we can place the I d. Value in this case, let's make title. And just like if you want to select this class, use this billiard sign. If you want to select this idea, well, you use this hash shine and this is literally the only difference. And now you can put your idea value in this case title and see that I haven't placed any space between these character on this idea with value. Now you can just go ahead and apply your stunning for this case. Let's make it like And if you go here, you see that now United selector. I have this line color and just like this title, I have idea right here. You see that in this section? I have class links and ideal X So I can go here and I can see here links. And then I can give it a background. In this case, let's make back if I go here. You see that? Indeed. We got this black background and let me just tell you one important thing that these ideas are more specific than this class means idee can override any other styling if he applied using class or element because they have higher president. And the reason is because these ideas are just like a real world idea on identification number, they are unique to pupate. That's why they have higher precedence. So let me just prove you that so you see, there's a class links. Well, if I go here, use that class in Notre style, the background, this guest list. Make it red background. What do you think? What's gonna happen? Class, Taliban or this Einstein idea style will be in, you see, because I d are more specific element. Have a specificity off one classes have a Swiss tee off them, and I d have a Swiss city off 100. So I did. Selector can always override any class or elements selector. So this is good. But now, if you want to make this election more readable, well, you can do that. In this case, we're pocketing any element who have idea, Felix. But if you want to make it to super specific for section well, you can go here and you can see here section. So now I'm saying that find all the section who have idea of length and apply this one. Now see, we still have that background black. But now this time we're more specificity on. Let me just tell you one or something about it. If I just go down here and if I get rid of this section, that which one is more readable, this one right? And this is more specific to But now because I have this idea here, what do you think If I just team the bag and on color off this particular body, which one would have in this? Only I d or i d with this element selector, But obviously this is going to win because we have element and I d to So now, in this case, we have ah, element. Spencer Davis is one. And I this was the divisions 100 Daughter is going to be 101. But this one only have already, which means we only have 100 specificity. So this 1 101 So this one is going to win. Let me show you. We still have this black background, so this is critical to understand. So let me just get rid of it because we don't needed. And now, if you want to use Descended selector, for example, you see there's an image, right? We have this image in this section who have a class of puppies and idea of poppies. Right? So what we can do? We can just grab this idea for a place we can go right here. And then I used the hash time and then I d puppies on, then inside these puppies under strict old images and give it a border off. Let's say to pixel solid life. And if I go here, do you see that Halder images inside this puppies I d really going to receive this group Excel line, border if I go here, and if I grab one image outside of this sexual value, see that this one is not going to receive it because we are targeting only the images which is inside this puppies I d. And in this case, this. So this is your idea selector. You can be as specific you want, but just remember that they have a higher president over class or elements, Director. 6. Grouping Selectors: So this will be I'm gonna show that. How can you group multiple selectors together in order to achieve the commonest tiling? And this is one of the best practice in CSS. So let me show you how can group multiple selectors together. So let's say I want to apply a certain color to these paragraph. Well, I can easily go here. I can target this paragraph element. And then my color, it is going to be darkish great. So much So you have 555 if I go here. You see that? Indeed. I got this darkest Greek Clark on this paragraph. That's great. But what happens if I want? Apply the exact the same color. So this heading toe and heading three and list again. You need to go here in it, right? Another selector in this case, edge to and then I need to again apply this color back. Koskela. Right, So here we go. If it were you see that? Now this a heading to turn into this doctor straight, which is good, Right? But what about this? Heading three Well, again, we need to go here, and we need to target exact something so I say? That's three and article here. You see that? Indeed. We got an ashtray because this is a really mature you. There we go. This is heading to the right. So here and again, if you want to play the same color on this list again, we do. We hear me to set here l I write So I can say here, Ally, if I go here, you see that Indeed regarding. So that's the way you do it. If you're not using grouping selectors who share the Commons telling So let me show you how to group them together. Well, it's a very easy. You can go to paragraph and it can use this comma and then your next selective, for example. That's too right. Next Lecter is going to be at three. And then the last directory is list. Right? So that's comma, That's it. And now I can easily delete everyone from right If it's even if I go here, you see that indeed they still have the same color. You see this incredibly powerful because if I want to change a color off these elements, I can easily go here and I can change it for example, I'm making and for career see that every element to be a selected is at a turning toe. This line, color and even I can write any style which got seared across all these elements. For example, if I said here next decoration, let's make it underlying And if they were here You see that now every single element underline decoration and even if you want, you can makes multiple sectors together. For example, if I'm using here elements selector but it can also use Iris electors class elector, even soda glass Director which you are alone in the future videos See, It's incredibly powerful, for example for Korea. You see that? Here I have this class title. Well, I can get it off it dispatched tow. No, I don't need as to I can say your title. And if I go here, you see that we still have the same exact styling applied to this heading toe. Why is that? Well, because us they were targeting this element. But right now I'm targeting this title. Animals still getting the same exact effect again. You can use any sector you wish. For example, I d sectors let me just go down here and you see this heading three. That inherently I can place an I d on. Let's say shows, right. And here I can get it off. It s a source. And if I go here, you see that it still had the same standing right here. Because, as frightening, I'm using this idea instead of this element so you can mix multiple sectors together. Now, let me just share a common mistake. Are bigness always make that this grouping styling is carried through. Let me show you what I mean. Surgical here. You said that this is the length so I can just get this links here them attacking the links which is going to the parent. And inside this links are recipe. Not like now this is a way you can style all your legs and you're alone all about how bonus tile, the link off your website in future movies. But as of right now, just follow me some color on Let's make it pink right over here. You see that? Now? Indeed. The talk in tow pink. But some people would like to say I'm gonna just group them and I'm not like this Ive is Detroit. So this is another suit was telling. And if you're here to see that everything is turning to pink But let me show you something . If I go here, let me add one extra link right here, Right. And here let me guess And diseases selector ever serve it If I go here, you see that not we got this is a selector. If I click yet, it is going to be visited Now that you see that it's also turn into this pink white starting to pink. Let me show you if I go here to see that they were targeting all the links which is inside this this section here. But why it's affecting this outside, playing right rights affecting where the reason is because you think that this telling is going to carry to It means that if I want selected this length, this telling is also going toe apply only the links which is inside this life which is not true, right? So once you said this one, it means that all the visited links in our webpage or entire website. So this is the global styling. So in order to be specific. You again need to say here and then your selector, right. It's very important to hear you say that. Now. This telling is gone and only these got selected. So this is very important. And this is a common mistake of beginners. Always make. So because now you know it. You're not gonna make this mistake again. So this is how can group multiple selectors together in arable achieved the Communist tiny . 7. Decdent selectors: So in this movie, bigger talk about descendant selectors. Well, December selector select all element that are descendant off its specified element. Let me explain you so suppose you have a website in any CMS? Like what? President Lula or Drew people. And you have a repeat just like this. This is a very simple weapons. And because you're using CMS or content management system, you cannot modify this Estelle document. But still Una applies certain style to this anchor tag. And we have little three and protect, which is the 1st 1 We have 2nd 1 here on 3rd 1 here. And let me show you the preview. This is our simple weapons. And we have little trailing, which is the 1st 2nd and thought and everyone was tight. This is only the first length. How will you do that? Well, as studying you conservatives go here and target angered ag and then apply us telling you notice color red. And if I save it? If I go here, you see that we indeed apply. I was telling to this first, but we have also apply the same Sally to the rest off legs and we don't want that So how we can apply this styling toe only this off first ANC attack. Well, if your experience front end developer, then you will try to find out the unique relation about visiting to our STM is Dom that was separated from the rest off these two legs. And you're correct. So let's go ahead and try to find out the unique relation that will separate this link from the rest off. Like so you see that this anchor tag is a child of this paragraph And you see this link is also child off this packed up. It means that when it hardly this paragraph and then dismantling well, these both actually going to receive the same stunning. And what about the 3rd 1 will see this 3rd 1 Do not have any parent off paragraph. It means that this got excluded. If I target paragraph so let me just go here and in our pocket. This a paragraph by carapegua and then space an ankle tag. And if I save it, if I go here, you see that now we have always tiling applied to this first and the second thing. But not pardoning that is a good progress. So let me go here that we have supported this element selectors by space. And that's actually descendant selectors by separating your selector using space is actually making it descended. Let me explain. You see, figure here And because this is a direct child, not just do one thing. Let me just grab this link here and let me just use this Pantech and inside the spandex, I'm gonna baste it. Right. So now ankle tag has apparent off span means not. This invitation is a child of span and grandchild off this para. But if I save it, you see that is still going to receive that styling because the relationship is now descended, ancestor. Because if it was a parent child, this anchor back, we're not going to receive that styling. So let's go ahead and get into the span. So now, by using this a space you actually making it descended. But because this board ling have the same pattern, which is paragraph now, we need to move one level up. It is grandpa, right? So because this article is ancestor off this attack now we can go here, and it can target this article here and I just save it and let me just go first here and you see that this paragraph do not have a parent off article. So that's why this relationship make this link unique. If I save it for you here. You see that now, only this link they seem to styling, right, So that's pertinent. Here we found the unique relation. So let me just go here because we are applied. They're a three element. We made it more specific. So what do you get rid of its parachute off? We don't need that. Back it off. Because if I go here, this ankle take is a great grandchild of this article. But this one is not so. That's why it's still make it unique. If I go here, that is still the same. And if you want to apply a different style toe this link or whistling, it's very easy. Let me just go here and let's go for this one here. So again, we gonna make use of descendant selectors, someone talking this aside and then the board link inside this one, we're gonna give the different style. If I come here. I say aside, I'm not just talking this tank attack, and then I'll give it the color of something like a green. And if I say that if I go here, you see that now? The bowling car green. So that's pretty neat here. But what happened? If you want to apply this green, only this link, not this link. Well, now you can be more specific. You see, this second link is inside this paragraph. So now what we can do here, we can target this paragraph. So I'm gonna find any ANC attack which is descended up paragraph and anybody. Graphic is the center of this aside. Go ahead. Applied is starting if I save it and I go here, you see that? Now we have applied the same styling toe. Only this link. And if you want to give a different style to this one, barely can go right here. And you can target this aside again and that tank attack. And then you can just give it your style. Let's say color, and I say I think And now if I go here, you see that now? This actually became pink hair. But what happened when you want to apply this seems telling to this 1st 1 means this first and the last we're going to receive. The same is telling Well, again, you can group them together. Let me just go here and use group selector. So I'm gonna just like this one, and I'm gonna just hit their best. And then I'm gonna use this comma and save it. If I go here. You see, that is the first, and the 3rd 1 will have the same styling. Now, let me just explain you one important thing in our early days off my web the lump in I got confused between this descendant selectors and compound selectors. Let me show you what I mean here. So if I just go here, you see that? Have these images. Let me this Copy it and I'm gonna just paste it right after here. Right? So now you see that we have This is section. And inside this section we have another section which have a class off images and then these images. So if I apply starting starting to these images, for example, this actually have a class, you just tell me the school had copied. I'm gonna go right here. and I see her dark images, which is a class in this. And then I'm a target. This image with a separate image like this element here, right? And I'm gonna give you their border off to excel solid. Let's make it red. And if I go here, you see that this aboard images which is inside this aside, and this section actually see the same styling. But what happens if I want to apply these border toe? Only the images, which is inside this a section not aside. So I only want to apply this tally. Do these images? Not this one, right? How do we do that? Well, you know that we can use Descendant, right? So we can actually use this a section, right? Let me just go here. And if I just see here section you see here I'm saying, find all the images which is descendant toe. This image is class. It is also descending to section and apply this one. If I say that if I go here, you see that now only these section images is received that style. But what happened if we apply compound selectors what that mean? It means that if I get up this space here, you see that now I have gotten rid of that space and now it's saying section dot images. If I say what, what do you think was gonna happen? These both sexual images inside section and aside, other sitting the seems tired. Why is that what's happening here? So it is a difference between this a space and then no Spain. If it is most place, I'm saying here, find oiled images. But wait because it's stick to this section. It means that find the section which have a class off images and apply this telling It means that if I go here, if I do not put any space, it's saying that find a section, the tablet blastoff images, which is different, right? And this one also the have the same one. So if I say way to go here again, you see this board Ruoff images to deceiving this tally. But if I put a space here now, I'm saying that find this class image which is descendent of this section. So let me show you. So what is the descent of the section which is right here. So if I'm putting space on targeted this one. If I'm not putting space on parroting this month, and that's why if I save it now, you'll see that the images inside this section will only going to receive that styling. So it is very important to remember these difference between compound collector and descendant selectors. 8. Parent Child Selectors: So in this movie we'll talk about buried child selectors, and the selector is very heavy and powerful because it's only job to select the Children off a specified parent element. Let me explain to you what I mean. So limited. Go down here and see that we have this aside and instead aside we have this Dooling 1st 1 and the 2nd 1 So let's say we want to apply certain style the only this link, not this one. So let me just show you here so we only want to apply. I was telling to dislike not this one. How will you do that? Well, what do you do? You go here and because you have learned about this in the selectors will director here and your target is aside and then find anchored. I've And then he will try to say, Okay, let's make it color red. And if I save me, if I go here, you see that indeed it's actually deceived this dread. But this also became red and we don't want it, right. So what we'll do next value go here and you will try to change it like a side than paragraph and then I collect right. So find all dangling, which is inside his pack it up and instead is aside and give it a default styling. So it will look like this. So aside and then paragraph and then ankle ing. And then you will make it color to be different. So let's make it blow blue. Is that the fall color? If I save it for you here, you see that again it's become default. So now we have successfully applied our desire to styling toe this leg. But this is the big way. This a little bit, Konkey. So now how can make it simple? Well, by using parent child selectors, Yes, it's very powerful. So we only want to apply a certain style. So this link, right? And you see that this link is a direct child off this aside, right? So what, are you gonna go down here? And I get it off it and then what? I look, I use this gated and simple and that's it. If I save it. If I go here, you see that only piece link actually got style. Not this one. You see? How cool is that? So I'm just go here. And this is your parent child directors. This is the skated inside. So what I'm saying here, find all the wrangling which is just Children off a site and applied is telling and figure here. You see that in this case, there's only one. So Yep, I can use this. This parent and child relationship was Tyldesley. I can go here melty. Find all the paragraph which have a Children off and drag child This one on us. This case I'm a CIA color. And let's make it great that now the his boarding card no style to green. The reason is because off both and there have same parent with paragraph and these other Tadic child office pregnant. That's why they bought this in the same telling. So in this case, what they can do You get to the EU's descendant selectors all you contain the parent chance selector. Let me show you that this project is a child off paragraph and paragraph is a child of article. So this case I can simply stay here, find article then I can use this takin off this parent chance Elector, I can say find all the anchor leg which is Children off this paragraph, which is also Children off this article and go and apply this tiling. If I say it, only the first leak was actually going to receive that styling. You see, it's very powerful And even if I want, I can get rid of this Balaj Chan selector and still work because now what I'm saying Find all the ankle link What is the Children off paragraph which are descended off this article This article is ancestor of any paragraph Find Children. So you see, I think is descendant because article is and sister of Bagram So this is very powerful now , for example, if I want apply let's see this is a strong guy, right? And this strong take is a direct child of this paragraph. If I go here against implicit, find the paradigm which have a direct child off strong and do something What? Do not go Well, I'm not saying foreign family. Let's make it cosy if I save it If I were here this strong have fun Family off, Cassie. You see it right here. And we also have this strong tech right here and cool. You see them? Sure you. Um if you're here, you see that we have a strong instead. Let me exactly like me to be big. So you were able to see it clearly. And just forgive me for this rigidities character. There is a This is also struck that And because we're saying find this trunk and which is direct child of paragraph and apply the stunning. That's why it's getting this month. Because in this case, this strong bag is a strike child of this angle, right? So even save it if I get here, is a that now this Actually this is this Carsey was tiling. And if I go here, I could do the same. I can use group selector if I want to apply the same styling toe this one too. Well, I could go here. I can say coma and then anchored in and find the child. And then I see here strong. And if I save it, There you go. You see, it's also received these cuts is time and again. If you want to apply this front for agriculture to all strong well, you don't need this. Uh, you know, directors, you can just apply this on this strong here. And that's it. This room, right? It's working. Be a different. So Yep. This is your parent child Selectors. Very powerful. If I want to change the color of only this paragraph well, you can see that this pack enough. Is that a child off this section? So I don't know if people here against a visit. Okay, find a section. And if you find any direction off paragraph in this section to go ahead and tell it, I must say that I think. And if a saving figure here, you see that now this become pink. Because this is a direct child off this section. Is it? It's not starting this back enough. If I just make this descendant, you see what's gonna happen. Every single paragraph inside this section will actually going to receive this time. And we don't want it right. They want Just tell your child. So I used this, created an operator, and if I saved you, say safe. So this is your parent child selector 9. Adjacent General Sibling Selectors: So in this movie we'll talk about sibling selectors. And in CS is we have go type of saving selectors toe walk with the 1st 1 Is that Justin? Seven selectors with select the sibling directly next to it. And the 2nd 1 we have this general saving selectors. I would select all the siblings which come letter on the specified element. So let me explain you both off it. So here you see that we have this attack. And then we had this paragraph. And after that we have this article and then this paragraph and these all are siblings. And remember this and Justin selectors select direct next to sibling. Let me show you. Let's say I want to style this paragraph. Well, you see that this paragraph is the direct sibling off this actual attack? So what we going toe? We can go right here. We can target at your tag and then you can use this agency of intellect which is a sign up . Plus and then I can target this paragraph because that's the thing I want to select. I can give. It is telling me this case color is going to be if I just go here. You see that this pregnant received Claire off, All right. Why? Because this paragraph is a directed next sibling to this actual, you say? That's why. Odyssey this telling. So if I just copy this one and if I just based it, let's say right here Now, in this case, you see that again. We are matching this pattern. We have the such one and then we have this paragraph. It means that I'm saying find all the paragraph which is directed siblings off this actual tag and styling. In this case, this is also matching. So this will also will receive the same styling if a save it for you here. You see that this also received the same styling. That's because it's a direct sibling off this after intact. So that's pretty powerful. But you order these that it happens tile this the next next paragraph. It means that it's only going to style the direct next sibling, not the sibling which is next to that sibling. For that you can. He was general sibling selector. So let me show you if I change this plus sign to but it's until it it is the sign off. General Siblings Selector. Well, if I save it, let me show you. If I go here, you will see that we have this at contact. Then this paragraph, this paragraph and this paragraph is also this of this tally and same here. So let me show you think you here. You think that find all the paragraph which is sibling to this everyone In this case, this is civilly So this actually got selected. And this one is also sibling. So this was also got selected. Let me show you. You see this one? So this is this last one. So now because we're using this General Terry, selector it, we're going to select every sibling which come later off that specified element in this case a specified element is to attack. So it's right here and then every single paragraph which is actually sibling off the set Contact is going to receive this time in this case, this paragraph and this paragraph because it's comes later, let me show you something. If I just go ahead and let me just like this paragraph if I go up here and paste it, you see that this program is also sibling off this actual. But this program will not going to receive that style. Let me show you if I save it here, you see that this one that will not to say that starting. There's no reason to confuse because in CS is you always go forward, not backward, so it cannot move backward in CSS. That's why it's going to select every single sibling which come next to this specified element in this section. Right. So what happened? Get rid of it. Let me just get it off it. And now, because there's no no actual tag and this pattern is not matching here, these will not going to receive this tiling. I'm sure you say. Did you see that? Now these as tight is actually gone, right? So again, if I want to give a different styling to this paragraph, well, I can take it is it's too right, I guess. OK, it's like this x two and then are if you want to this agent selector that it was going toe just crap the direct next child molester, Foreign size. Let's make it to Ram. This is going to be really big. If I go here Is he that shall only this paragraph deceived this much porn size. But if I used this channel selector which is tell the operator if I seaweed if I go here you see that now all the program which is sibling to this edge to we're going to receive that styling. In this case, we have toe 12 And that's why here is a one and two again You can change the selector, Let me show you. So let's say I just like this up plus p which means that the direct next child it is just one right So now this was likely going to receive is telling what happened If you want to apply this telling toe test one well one way you can go here and because you see this paragraph is a direct selling off this paragraph. Melican symposia paragraph This is the one, right? If you go here you see now this actually went to receive standing. But there's another way. I'll get it off this be And then I say as to blessed be And then again I continued Blessed be right So what I'm saying here that find heading toe whichever that actually will be which also have an accident be, and then I can save it. And if I go here? You see that again? We have the same Stelling walked for the second paragraph. So now what happened? If I want to target these particular bag enough, let me just go here. And you see that this big enough? The last paragraph is comes into the society, right? And you see that this paragraph is a sibling off this section. So what I can do, I can go right here being a target dissection and I guess it plus B And then I can give it any style I want. I can suppress it color. Let's make it good. Now if I save it, it's actually not going to receive that side. Let me show you. You say it didn't received. And the reason is because this is not a direct civilly you see that are extending. Is this break element so I can get rid off this back enemy, and it will actually going to style this paragraph. But if I want to keep it and because this the last paragraph, I can use this in a selector because anyway, that's the last one. So it's only good, just like the last one. And it's a it's work and this is your adjustment. And General sibling selectors in CSS is. 10. Attribute Selectors: So in this movie we'll talk about attributes. Electors, while attribute select us are very powerful. They're here to give even more precise control over your CSS styling. So what are they and how can you use it? Well attributes electors direct element based on attributes or attribute value. For example, if you want to select every single element on the page who have attribute named class well , it we're going to select everyone because each of them have a attribute name plus. But if you want to select every element who have attribute name class and the value title well, in this case it's going to select only first, so we will see it in action in a bed. But first, let me make this contributing clear. Anything which comes inside this element was actually a tribute. For example, this class is an attitude. This idee is an attitude, even Aldo Tribute on image tag. This is also an attribute Terrell, also an attribute This H R f is also attribute, and even if you use any gasket framework like angler view or react, you confined to your own afternoon. For example, this name right you tonight This estimate so it doesn't matter if it is rebuilt or custom. Attribute, name as long. This is a part of this element. It's called an attribute. Now let me just show you the preview of the page. It's right here, and this is all we need for this chapter. So let me just go here and now let's work with attributes Director. So let me just go here. And first of all, I want to target everything that element who have attribute Named Class. And for every mood, we actually use this choir bracket or some of, say, a big bracket. But you use this choir, back it in a row, target any attribute and then reached better would win a target within the target class. We'll find all the element who had this class attribute and do something with this case. I'm not, say her border and let's make it two pixels solid red. And if I go here, you see that every single element in this webpage is actually have this border because every single of them have this attribute name class, But let's make it a little specific. I want to target more lead anchor tag who have after Britain in class. Well, that's pretty easy. You can go right here and at the very starting. I can say ankle. And now I'm saying find all the ANC attack who have attribute name class and have a save it if I go here. You see that? Now it's electing all the ANC attack. Who have this class? Afternoon. Let me just go here and let me just get rid of this. The last one, right? You see, we actually have it here in the last one, right? Let's get rid of it. And if I say very difficult here you see, the last one is gone. And this is how at the boot selector walks in this case I talk in this class but you can also target this hrd off. Let me show you. I can say here h rdf, right? Hello. And I for 70 people here you say I'm still targeting at every single bank attack who have HRT have acted. So this is just the beginning up attributes electors 11. Exact and Any Word Attribute Selector: So this will be very talk about exact and any word attributes selector. So by far you know that if you want to select any element based on its attribute, it's going to select all the matching element. But what happened? If you want to select any element based on its attribute value, let me give example. So let's say you want to target this a paragraph which have attribute name class and then attribute value text. Let me first go here and let me just talk it this a class attribute. And if I just set this border to be to pixel solid red if I save it, If I go here, you see that everyone got selected. But I only want to select this paragraph and you see that this paragraph have attribute value off text. So this is the exact value We're on target here. Well, it's really easy. You can just type here this equality and then running, which is going to be text. And I've a civet. If I go here, you see that this morally paragraph got selected. That's very powerful. And you see that I'm not using this paragraph a specific you the reason because this at neutrality is unique. So that's why I didn't bottle to use it. But if you want, you can use it right here. But what happened if I had a one more paragraph? It's also want to have the same attributes with his name in class and the value is text. Well, you see that this is also going to receive the same styling. But what happens if I make any type was on this attribute value? Let's say textile And if I say V if I go here, you see that now This paragraph Do not receive this telling because this is not the exact match. Right? So this is called exact match attributes Director even you can see that this anchored I had this class attribute and this only attribute value It is website so I can either targeted Yep, I can copy it. I can go right here and I can use this group sector to group them together Open this edible selector squad rocks and paste this value This link also received the same styling And now what happened? If I want to target this this seconding which is a googling right and I want to target this link based on this Google world. How do we do that? Because this global world appear between other words. In this case, we can use any word attributes selector, so it will target Evening world. It doesn't matter, really. It's appear in the attribute in this gets class right over here and taking this class attribute. But in order to match any world in that attribute value well limited. Use this Tilda sign and this is the keeper which is located in the left off one no medic giving. And now you can against like this the quality and then you can paste you really good. And I'm gonna make it background to be yellow that now this could elicit That's tiling. That's very powerful. And if I go here, you see that Google appear right here. But it doesn't matter, really. This would appear in this attribute values as long this unique foot and show you If I disagreed and type in the zebra CIA, you sit in and suppress the right here. It doesn't matter as long there's a world name Google, right? If I say that if I ever hear you say Still, we received the same study. So this is really going to select any world in this intimate Well, it's very powerful. That's a till the sign, right? So let's go ahead and get rid of this Zimbalist our stuff and I get offended. Selected Facebook YouTube. Let's go over here. And I was thinking you took well, there we go. And if a saving figure here you see that now the Utah got selected and let me show you want a fascinating the real world and practical use cases off this any word attributes selector . And if your s your guy or search engine information guy, you will love it if you unless you guy you know the importance off do following. And if you get a do following from high dominant party website, it will help you reduce search engine ranking. So generally you get these back Ling's from guest posting or some other matter. But if you look guest posting than before pitting your guest post two big websites first you need to know that they offer do follow link because if they don't offer do following, there's no reason to guest post on that website until unless you want to get featured in that article aside. So how will you know that they are for do following or no following? Well, it's very easy. You can use some kind of a chrome extension which will strike anyone who have no followed links. For example, I used that this crime excision which call strikeout Nofal links. And if I go here if I add let's say well, no follow. This is data, but and values search engine looks for And if I go here, you see, that's actually striked out. And this is actually this chrome extension, right? It's actually active here. So that's why any link which will be in the weapons but have a little bit off No, follow it. We're going to strike it out. Let me destroy if I go up here in this website here and let me just add here Well, it is going to be no follow its tracked it out. You say it's not my website. Really gonna build this exact the same thing using any world attributes selector? Yes, let me show you. So let me just first disable this chrome extension. So there we go have the civil it. And now we're back to our normal ink. 70 here and still have this event. No follow. Right? So now what they could do. You can still like this absolute. Yep. You can go right here and you can see Okay, just find attributes. Name well, and you'll find the value known. Follow. Go ahead and strike it out. With this case, I must text decoration lying through an offensive if I go here. You see that? Now we got this line throat, is it? It's very powerful, but it's not correct. The reason is because this rhetoric have a ton of different other running for in this case , like some Zubrus early this 1st 1 in are going to work. You say it's not working. So now what you can do, you can go right? Fear and use this Anyone selector? Yep. You can just use the still assigned and I have a save it if you go here. You see that? Now it's still struck it up. So let me just show you one awesome example here limits. Go to HR website and if you're s in space, you know that this is insanely popular. keyword the search tool in space. And if I go down here some court off industry expert who uses a child. So if you want, don't know that is a battling steak art. It's actually know following or do following. Well, it's very easy. You can hear again use that chrome extension, and we're going to strike it out or against a business right click here and let me just go . Here, let me just go ahead and hit this plus sign. This is going to add an extra block here and here. I can target that attribute, and then I'm gonna use this. Still a sign and then I must be here. No follow, right? No follow. And then here I need to add medication block, which is going to be text decoration and in this case, going to be light. And that's it. You see that they got line through. It means that they are no following. Let me actually just make it a little bit bigger here. Let's hear, form, size. Let's make it to them. Right. And you see that they have this strike through. It means that these are links are no follow links. Let me prove you that here. So they click here LTD's click on this. You see that This particular dangling that they have the well off? No, follow that. This is insanely bar free. And you can do this by using this. Anyone attributes Director. So, yeah, this is all about this exact in anyone eloquent director. 12. Beginning and End Attribute Selectors: So in this movie we'll talk about the beginning and end attribute selector that allow you to select all element based on its beginning and end Attribute value Let me give example. So here you see that we have total six link and the 1st 4 are external link and the last toe are downloadable link. So there's an external link. So let's say you want to give a different style to the external link off your website in this case desert. How do you target them? Because the exact value won't work here. Any word selector also want to work here. So what you can do we can use beginning selector is going to select the beginning But in this case, if I go here, I can use this ANC attacked. And here I'm gonna say target this photograph at repute and you see, this is the beginning. So for beginning we need to use this up carrot symbol which generally the six keypad in your keyboard. You can use this equal sign and then the beginning. You want to target In this case I don't get this tested to be Yes, Colon doubles rash Somebody here https and then Colon doubles last. And then I didn't give some generally style. So in this case, I want to make this color to be Let's make it right. If I save me to figure here, you see that the 1st 4 which are external link, it's actually going to receive that style. That's pretty powerful, but it can do some fun thing. Let's say, uh, on after, I'm gonna add something here. What do you want to add here? But let's make it there. I'm a sick content you, which is going to indicate that this is actually external link and it's a very safe and you can take this even further. You can t just use something like image or I Come on. This gets I'm not use this cycle, which is located in Images folder. Which name is linked? Dark PNG. So my sailing R, p and G. And if I see which people here you see that now there's a link who's saying that this is actually external link? You see, it's a really compelling even I say this link is actually stick to this contain I can actually give it some kind off. Let's say margin and let's make it left Margin left. And I must here with them, which is a lot. Right, Selous? Make it 0.3 Ram. If a seven figure here, you see that? Now we got some breathing room here and pointing that these are the external link. If you click there, it will open another website. In this case, these are the maps. So you see, these are very powerful. And these at the beginning. What about the end? Right, this to go here. And you see, this last link is and with dark pdf, it means this is the Donald Bill fight, and here you can't say it right. You can't see that dissected Donald will file. So why not? Let's give it to your user indication that this is actually downloadable pdf file. It's real easy. You can go right here and now here I am using this beginning for and we're gonna use dollar sign Let me show you. So I'm a packet. All that could be which have is a tariff attributes and then I just stalling. So this open can it for beginning on this dollar for end. And here I must say about pdf. Right. And then what? I guess it. I can see here after and after what I would do here. Well, I'm gonna apply another I cannot have so contain. Let's make it ul. And in this case, I want to make itself images. Start, pdf PNG. It's right here. And if I save it, if I go here, you see that we got this pdf link, even if any go here and let me actually just cut it off. Now, let me just actually give it a simple styling to make sure that we are working fine here, color red, and I see deceiving the same time. So let me just go ahead and let me just go back, right? Hey, go. And if I say that figure here, you see that now we're giving indication to our user that this is indeed a downloadable Pdf . So if you're using any Seamus like a war, presume last choir space or anything, and you don't have any way to give your user indication that to be, it's taking well. You can use dissector to give the exact indication to your user because nobody liked. Click here and find out that Oh, my God, this is Donald. Will Pdf, This is actually very irritating. And let me show you something on Google at such factor, but selector and see, I'm using this. A wrt plug in images, Vera, trust it. Actually tell me that of each other secure and trusted link. In this case, this is the secular because there's a green signal And these are the trusted Vap state. And there's also a secure website. And if you also want to apply the same thing on your website, many want to syndicate your user that this is a circling. This is I'm secure Link. Well, how to do that? But it's very easy. Let me just show you if I go here, you see that every securing have this ass at the very end, right? So are you getting off? This s right. Let me just get it out. This also right from Google. So we have this a two security well and toe unsecured Ural. And if I go here, you see that starting to really not going to receive that styling that season because we're matching this STP s virgin. Not this Scdp origin, Right? So know what You know, I can go here and let me just get rid of this year. And if I go here, you see that first are secure site is going to receive that link. So for the second link, I'm going to apply this circle because I have copied this circle. So let me just go here and here and attack it is and attack. But you're going to have this h r f and then this open again, which is a starting symbol or begging symbol or perfect. Anything you say. And here I might say yesterday, B s and then here, and I'm gonna give it some time after, right? And here I'm not saying contained. And that's going to be the you Carol. And the Ural is goingto be images. And here it's going to be this secure, not BNG, right. There you go. And now let me I have to do with the magic left here. So Margie left is going to be 0.3 them. There we go. If I say if I go here, you see that we got this secular like here tonight saying that these four externally But this a middle to are the Secondly, the last two are downloadable Pdf and the 1st 2 are external link, which is Unsecured Ling. I mean, if you use this beginning and an attribute selector or right now in your website to give you use an indication at least you can use it on this A pdf is it? So now we know that if you want to take this beginning value go for this Open, correct and And really go for this dollar sign. So this is your beginning and end attribute selector 13. Substring Attribute Selector: So in this movie we'll talk about substrate attributes, selector that allow you to select all the element based on its sub string Attribute value. Let me explain you So suppose we're targeting this class attributes and we want to select all elements who have this big character are a sub string in its attributes value Well, in this case, this fast is going to get selected because there's a bee in this class activity value But the 2nd 1 do not have a be corrected in it, but hard when we have it, there's a Facebook, right? So there's be right there and then in YouTube we have this be but in a 50 60 c doesn't know be it means that we re target only big after the fourth thought and first is going to get selected. Let me show you. Let me just go right here. And I'm not talking all the link tag and then I don't see her class attribute because this is accurate were looking for And then, in order to find the substrate or any character, you to use this star sign our multiply sign, which is located in the eight and memory. Keep it on DVD character are substrate you want to select in this case I'm looking for Be and then give it your styling. In this case, let's make it color right? And if I say that if I go here, you see that only the first start and fit is going to get selected because they only have the big corrective in its class. Attribute value. You say it's right here and here and here. And at this time, let's go ahead and target this double O in this case, Google and Facebook. We're going to get selected. Let me just go here and I wanna make it. If I save a difficult here, let's see that only the Google and Facebook had double in this class attribute value. It's very powerful. And again are you can choose any activity to wish for example, this one. Write it off and see any therapies. There's also double. All right, So even if a target here Sharrif And if I go here, Do you see that this girl Facebook got selected But also the ceases book got selected and let me just go here and you see, that's because this double is also present in this giraffe attributes. So that's why this one is also called selected, So really use it practically well, I'm sure that you will find a many practical cases. Really? You need this substrate attributes selector, for example. Just imagine that you want to know if any weapons using bam naming convention Obama is the styling guide for CSS, which makes it easy to read. Your CSS scored an estimate document. So let me show you are if I just go down here, let me actually just say here you l which is going to in order list and that ally and let me actually make is only two word and let his copy. So you see that I have are not a list and then list So what is Bam? Let me just go. Here, let me this people explaining So let's say this is going to be clamped and them stand for block l a mate and modify. So what is Brock? What is element and what is modifier? Let me show you If I go here, you see this? Another list is actually a block. So I'll say here class and this is going to be the block. Well, what kind of block it is, but it's a kind of list. Right? So this is a list of rock. Then what are these? You know, Children's well, they're the least items. So list. And because these are the element, it's actor, right? So we'll say here I am. So in order to separate this a block and element beavers this double underscore time. But what is modifier, right? This last part well modified is a different state off any item in this case, if I want to make this a red green or something like that Well, now it's going to be modified, so I'll use this double that shine and then make it correct. So this particular list item have a different state, which is a modified like so, you know, if you want to separate the element, you use this double underscore. And if you want to said different state while use dis double that shine. So if you want to protect that these particular weapons using bam naming convention Well, what do you know? You can target this A double underscore. Let me to save it. Let me just go here and in this case are not been specify here. I'm just trying to get addressing the element who have this class attributes. I want to hug it or match the substance which is double underscore. And if you find it well, that means that this guy using bam naming convention and again happy make it color red. You see that first item is going to get selected if I go here, you see that this Scott selected? That's because this is using bam naming convention. So again you can match anything new ways using this substance sector. It's very powerful. Okay, so this is your substance attributes selector. 14. Link Pseudo class Selectors: So this movie will talk about the link selectors and visas to do classes which are specifically designed to style the links off your website. Let me show you. So this is our simple page and we happen all six legs toe walk with and you see that this on my website which is Rachael website. On this a Facebook is got different color, then the rest of dealings. The reason is because I have visited to these two sides. So that's why they have received that browser default with the style color. You'll see the bit that how can this tile the color off your visit legs? But let me just go here and let's start with our very first suitor classes for link and that's called Link. Let me show you someone took a diesel tank attack and then this current operator and then I use this link pseudo glass. And by using this to the class, you can manipulate all the links off your website. For example, you can change the color of the size and even taunt all your links into Britain. So right now I want to change the color off all the things and I want to make it red. You see that all the under visited links color turning to read, but the visited links are still the same because we haven't style it yet, and we will do it in a bit. But first, let's go ahead and turn all the links into buttons. But it's very, very easy. I can go here. I can turn us a background. Let's make it black background Animals said this color so I don't overwrite. And I say that right. Well, I can get rid of it, but because I'm over reading here, this we're going to take precedence, right? Not save it. And if you go here, you see that every link is actually got this background black color. The reason is because they are late together, so let's separate them. So I'm gonna say here, margin on, let's say margin top. So margin top is going to be wonder that now we got margin between these links and now we can do some basic study. For example, I can add some padding, right? So fighting is gonna be one of them, which is quite a lot, right? See, It's is very big, right? and centre them together. So, for example, I can simplicity text and I say here a line has been to his center. Right? And you said there's actually no in center. We can get rid of this underlying here. So I'm not saying text decoration on. I can set it off right If I go here to sea, doesn't underline, but we still the visited least color is different. So for that, we can go right here. And you can use another suitor Class named, visited. Yep, visited and then I can t its color to be right. So again, it's the same like this color. And how do you see that we got this awesome butter, You see, it's incredibly powerful, and this is how you get is tied the color of your visited links. So let me just go ahead and get rid of it, because I just wanted to show you that you could have to do a turn up thing. Right. So let's go here and again. You see that? Now we get back here because this mystical s is white. So that's why you can see So let me just turn into something like it like a tomato, right to medical on. This is a little bit different than the red and systematically is a little bit lighter than that. So now let's go here, let's make it Dodger. Right. So, Dodger Blue, which looks really good, and I see that now we have it. So now you have learned about to link or anger classes with the link and vested. Now, next one is going to be Harvard, so I can simply go ahead and say, anchored on power and then we'll style it, right? Let's say I wanna make this phone size to a little bit big. So in this case, I'm not saying one point through them, which is a little bit bigger than the one that another holdover them. You see that now? They are indeed increasing the site. This is incredibly powerful, right? So on How are you can do this thing or even even get rid of that underlying some Say your text decoration and let's make it Now. If you go here, you see that our harbor, the text impression is gone, right? Powerful. Even. Let me just go ahead, get rid off it. We don't donated. If you go here. You see that now? Yeah. There you go. Right. So this is your hour. Now, the last step is active. What is that? You? But if I click it and hold it and when you lease your mouse, right? I'm sure that I mean, let me just go here and our target here e active. And then I'm gonna give it a color off something like that. Same dream, because that is very visible. So that's why I take it the screen. So if I go here and if I click here and hold you see that now it's turned into green. And if I lose this mouse, it's actually going to open that facebook dot com. Right? So this is very powerful. If I click on this Udo and Holy see, there's a green. And now, because I clicked here I have is dead. So now you do. We will going to turn into tomato color. Let me show you. You see it signed tomato because I have visited this link. So these are for incredibly important links tiling soda glasses, right link. We stayed our enacting and let me just make this clear that these order matters, right? So let me show you what I mean. What happened? If I just a hobby, this visited color and I pasted it. Then what? It doesn't happen. Let me show you. If I go here, it will actually going toe overwrite. All start, let me show you and say, Well, how about this one is going to get rid of that text operation. But let me just make this color right, because everyone is actually going to have the same property and value. So that's why you're able to see the difference very easily surround this case and I say a heart pink. Let's say India, right? So if I say what if we go here? So now we know How about this one? You say that it's indeed talking to Poppel. This is also turned into Poppel. But when I heard about this visited, you say there's no hover in fact, because visited style is all writing the how the state off your leg. And what about the active state? I'm sure you when I click and Holy see that now it's turn into grain. But when I just goto this visitor link and a click and hold, You see? No, there's no in fact. So it's also a writing the active state off your leg. So this is very important. In order to work them properly, you need to copy this one and even to place into the right order. And this is the right order, not go here. And I've just hover on this visited. You see, they are going to receive that purple color and on the click and hold you see that receiving active state. So order is super important. So there's a one trick I used to remember them is love hate selling show you? You can simply say here love and hit right and just imagine that there's actually t at the last and then you can easily remember it. Love head, Right. So this is daughter and as a long you follow the right order, you'll be fine 15. Focus Selector: this will be we talk about focused selector and this is one of the most incredibly important soda selectors in CSS. Because by using this focus selector, you can authorize and improve your website for a usability and accessibility. Pappas, let me show you what I mean. So this is a simple webpage and we have one simple paragraph, six lengths and very simple on style farm. And this structure is enough to illustrate how important focus selector is. So if you're browsing of there for long enough, then you might have come across stabbing feature. You see, when a habit I can easily living in two different parts off the website, for example. See, right now I'm never getting wireless. So if I just hit, enter it, we're going to open. See, it's his book. If I want to go back, I can use sift and tab, and I could go up here like backward. And if I hit here Google, usually if identity is going to open the Google Web site. So this is your padding feature on this is what focused me. For example. Right now I'm focusing on your name so I can type my name I'm focusing on your email so I can pay my email my message and I can hit Submit, which is going to submit that farm. So how you know that we're focusing on summit, but because that border around there. So if you want a style that border, are you going to get rid of? It really could do that. Using focus selector, let me show you. So let me go here. So he had like, it is a focus selector. And then you see that I'm not trying to be specific. It means that it we're going to remove every single focus from our website. And if I go here, you see that right now our focus is this border or outline. So it is not here, and I don't see her outline and must have known if I say that if you go here, you see that now that outline is gone. You see that I'm having through all the links right now. But it can't state because there's no focus cable. It means that there's a nothing but can visually show me that where I am. So that's why it's struggling, not recommended, until you replace it with similar functionality. So let me just go here and let's do something so unfocused. Im said outline to none But I can do something like a border and let's make it three pixels solid And let's make it something like a prey. If I go here now, if I tap through you see that now I'm getting that border indeed. Right. So now I can see that this is his book, the polled. Then I'm on the input, your name, your email, your text area and then this Submit button and you can see that we're getting that border here like everywhere. So this is super important to understand And even if you want, you actually give something like a background. Right? So I think background really do the trick on here. Don't say yellow. So yellow background figure here. You see that now, releasing that your background if attacked through you see, I'm getting the enough focus. But what happened? I want this focus bedroom only on this input from not on submit button. So right now, if I just focusing, you see this submit. But it is also getting that focus. So for that we can go right here. And now you know that you can target this input, right? And then you can simply say focus. And then you can set your background to be here, right? If a stereotypical. Here. You see that? Now, if I just go here, do you see that they're receiving it, right. But again, this submit button is getting that background. So if I go here, you see that This also having protect this also having protect. And this submit button is also have input, cat. But this one don't have. So why this text idea getting that background? Well, that's because I already have these focus right here. So let me just get off it, right if I say we go here. You see that? Now, if I just stopped through, I'm getting this barren in name email, but not in tech stadia and then the summit bottom. So now what? We need to know because I need that focus in this text area and this name and email not in submit button where you can go here and see that this name is actually have a type of text this time, have email, and then we have tech stadia. So what we can do? We can use attributes selector you have already learned so I can see your type on now type . You see that there's actual text and email, right? So we didn't grab here. Text on then and I say focus and then let me just go ahead and group them together somehow Just common. And in this case, I'm saying e mais because I want this I programmed in email to and the last one is actually also wanted Text India from a pack logistics area and figure here. You see, the text idea is actually saving that focus. This email is actually deceiving that focus and also the name is receiving the focus, but not the submit button. You see submit button. Do not receiving any focus on Let me actually just give a this off something like a default styling. Some say border. Let's make it five pixels solid and let's make it red. And if I save it, if I go here, you see that we have focused on Sabine button, but it's not received the background off yellow, so this is incredibly important. Our feature. Let me show you one more or something. So, for example, if I just go here and you see that this paragraph is not creditable So what happened if I make this creditable? So let me just go here. And I can easily set here an attribute name contained and edible. Let's make it true knifing here. And if I just click here you see, now it is any to build incredibly important, right? So you see that now, be receiving that focus. But if I get rid of this focus here, what do you think was gonna happen if I go here? You see, there's more indication that we have correctly focused on these paragraph. You see, there's no focus. So it's always a create recombination to use that focus. So so for now, limited to go ahead and because I also want to give you the background of the target with back off right, and obviously that is pregnant received that forecast. And if I go click outside, it'll able to get it off it. But right now, it's not that the reason is because I need to see it on focus, right? And the same thing here on texting Focus. If I go here. You see that? No effect like here it is going to receive the focus, right and fact. Look outside. We're going to get rid of it. And same thing here in tech stadia. So Yep. This is how can use this incredibly important focus elector to improve the accessibility off. You're upset. 16. Required, Optional and Checked Seletors: So this will be we'll talk about form selectors and visit the selectors that are specifically designed to style the phone. So here's our webpage and you see that now I have a very simple farm. We're gonna fill your name Emily, while the sender, your favorite fruit, your message subscribe to newsletter. And then suddenly the farm. Obviously, this is the dummy form because we're here, All these tile, the farm, not make it work. And these are the inner farm elements. Vignal need to learn about forms to the class electors. And also you can notice that I have barely in his time going on this farm. The reason is because I wanted to keep it super clean and simple, so you can understand it very easily. So let me show you the estimate structure and you see, this is our fund and every single phone element I had placed into this class room. And there's only one reason why I did it, because I wanted to give it some kind of a spacing between these form elements. So let's go ahead and learn about form selectors. So let's say you want to make this name and email failed required. Well, for that, you know that you're gonna use thes at Gmail attribute named required on any input. And that is going to be the required. So this case I adhere, required on this name filled and also on this email. So here we go. Now they go here, you see that these fields are required, but there's a no visa indication. So how can give some little indication to user that these fields are required? Well, one way you can use our old friend attributes, selector, target this a type email and type text and Daeniken style it. Or there's a better way you can use the quiet selector to do that. Let me show you. So I use this corner better. And then this required selector and then I can add any styling Irish toe all the required form judgments. So in this case, I'm gonna give it a barter off. Let's say to a pixel solid and command and never stereotypical here You see that now? Name and email. They said this to matter, partner, because these fields are required Even if I go right here and you see this you're a fate is not required. But if I make this require, this will also going to receive the same partner and his seat right here. Even this attack stadia. So let me just go down here and you see that this the text area. If I make it required, it's out of going to receive the same border. So that's really good. Now let's go ahead and get rid of it and let me just get either from this, Um, because I don't want to make it required. And there you go. So now these are the required fails. But what about optional fate? So let's say you want this time all the optional fails. Well, it's very easy. You can go here and you might've guessed it. Yep, it's optional soda glass optional. And then here I can add my styling. In this case, I'm not. Give it our filter and it's gonna be drop shadow. Someone would drop shadow and capture is going to be, Let's say, five pixels on XX is five pixels on y axes, five pixels on blood. And then let's give it a color name. Tomato, Right. If I say that if I go here, you see that all the optional field. I received this a drop shadow. And again, if I just go here and if I make this you want to be required again. It will not going to receive that styling instant. It'll going to receive the required study. And even if you want, you can switch the other stuff. Let's say I want to make this require and this styling. I want to make this optional. So if I go here and you see now, the requires talent is a different and these are the absence talent and you can see that this border do not work on these ladies but specifically here. You see, there's no border right here. And even if they can check boxes, it won't work here. So this border won't work on the radio and check boxes. So let's go ahead and sit back. There we go. Do you think of him? So this is your required an absolute pseudo class director. But what happens if you want to give a certain style toe? Only the checked element. For example, if I click on this female, it will won't receive a certain style. And on a click on this check It will go on doing since tartans time. So this checked styling only walk on this radio and check boxes. So let me just go right here. Let me just get rid of this required because we do not need it. And here you guessed it that there's a one sort of glasses. Name is checked, and now if I just go here that if I click on this and mail it, we're going to receive that drop. Shadow and female who want if it's like this female than female, is going to receive that styling but male want and seen here. If I just take it, it will going to get it up there styling. But if I check it it, we're going to receive that styling. And that's your checked selector again, if you want to be little specific and you only want to apply that checks telling to radio you can go here and you see that in a radio. We have type radio so we can use attributes selector right before here, and I see here type and is going to be radio. And now if I go here, you see that it's only going to walk on radios, not check boxes so you can be as specific as you want. So this is incredibly powerful. And what about styling, your disabled or in able form elements, or even the elements who have placeholder? Well, that's what I've been a lot in Next movie. 17. Enabled, Disabled, Placeholder Placeholder shown Selectors: So this will be we'll talk about the next four pseudo class selector, which are specifically designed to style our farm. So here's our phone again. And let's say you want to disable this Ural import so as a fried like I can take here and I can feel any your Irish but for some reason you want to disable it. Well, in this case, we can go here and we can apply these able estimate five attributes, so I don't see her disabled and I for saving tobacco here. You see that? Now it's disabled. And if I click here, you see, I cannot add an input because it disabled. So now this input disabled as you wished. But now you want to give it a custom style. Well, for that, we can go here, and you might already guessed that we have to go name disabled, and then you can apply your styling. In this case, I'm gonna give it a background off this very off great club that now we have applied this a very off a great color. And you say that now it's given the indication that this input is really disabled again. You could just to give anything new Age, for example. Even add some kind of border around. Well, you're totally free to do that so much. One pixel started and let's make it red. If I go here, you see that? We got it. Right. So Yep, it's still get up to you. What do you wanna put it? Start here. But this is how you can use this disabled. So selector to style your disabled for elements we also have enables to the class which is going to add styling toe all enable elements. In this case, If this is disabled, it means that every other four elements are enable. And here I can use that enabled pseudo class to talk it old enable elements. And in this case, I'm gonna give it a filter. And again in reply here, drop shadow, five pixels and then five pixels. And then again, five pixel, which is a blood. And then let's make it Dodger blue. And I think Oh, here. You see that? Indeed. We received this A drop shadow off positive loop on all the enabled for items and again even switch it. So for example, I can just go ahead and commend it out. An incident enabled I make it disabled. Right? And if I go here, you see that? Businesses that starting. So let me just go ahead and let me just switch back and figure here, Terry. Go. So this is to enable and disable pseudo classes. Now, that must go ahead and let me add base order on this name so much. He had a place holder name. And here I'm gonna add one more disorder to our email. So now if I stay video here, you see that? Now we have placeholder name and email so you can see that by default. Color off this place holder is great, but for some reason, you want to make it rate are green or blue. How will you do that? Well, it's a very easy because you can easily guess that we do have a selector name, please. Holder, which is going to select this place order Do double column, which is a reservation operator on. Then you can give it the color. In this case. I'm gonna say it here. Right. And if I go here, you see that now will be indeed style. The color off a placeholder. This gets red so equally, Hughes at this place with a property too many ugly, This tally off a placeholder again. If you want to just add or increase the size off place for a text relic considered program and figure Here, you see that the size off the place all right is quite big, and you see that this place or the size won't affected the input side. So that's really important to understand. And if you want to just decrease the size 0.5 from, see that they're quite small and here you can use this off great color. In this case, let's make it e to give it to these kind off a very short of his tiling again, There's a no use of it. But if you need it, this is how you do it. So now let me just go here and let me get rid off it. Let's make it something like our old BBB and figure here. You say that now we have. So now this is very cool, not just go here and let me just enable this you are because I want to show something really special here and let me just go here and come into doubt. Always talent. And now we have a very simple form. So now we can see that name and email hapless Older. But you're early and messes do not have. And you want to give a start and customs time to the only form elements who have place order in this case name and email. How will you do that then? For that? Let me just go here. I want to use this one sort of a selector named Placeholder Show you see? Pay shoulder shown on. Then you can style any form element or input that have place Holder. So now if I say here border, let's make it to excel solid real and festivity figure here. You see that? Because these two from element police order you need They actually received this border but not figure here. And if I add a placeholder for this, you are sure you placeholder and I'm a sit here. You help investors figure here. You see that This also going to receive the same styling. So this is powerful. Now let me show you one water practical example So let's say I have this name and I have a big place order for this, for example. And a seal my name. Get it? And I am the Corning video. And if you go here, you see that now? This place, what is quite big, isn't it? So you see that it's cutting in half. Well, that's not a good practice. So instead of cutting it half you can So ellipses there, let me show you Say figure here and I just tight And I can say here next over flu and let's make it ellipses. And if I go here, you say that now we have is ellipses right there which indicating that there's a some more waas and this is a little gonna happen in the narrow screen, like in mobile devices. Even you could go ahead and add some kind of a italicize important style. Does he have italic right? And then you see that all off your place, where attacks is turning to italicize. So this is your disabled enabled placeholder and place there a shown so the glasses and this is how you can use it in a project. So now what about applying a custom styling to your valid or invalid form elements or entire farm. How will you do that? Well, that's what we're gonna talk next. 18. Valid and Invalid Selectors: So this movie really park and next to super important and fascinating pseudo class selector that I specifically designed to relegate our farm and it's element. So here's our simple form, and by now you know that it can use the choir. An optional pseudo class selector to style you required an optional failed accordingly. But what about validating the user input, for example? This is the email element. So how can I make sure that the value entered here in this input is a valid email? Or in this case, how can make sure that the value entered in this farm field is a valid? Um, well, let me show you. So let me just go right here. And first of all, in order to make sure that this work properly, we need to just go ahead and make it required. So because this is gonna be required so it will force input in this our fun filled. And then you see that I have said this type Ural and type email, and we have valid and invalid super selectors which work with these estimate five attributes so never cohere. And I'm a target. The input, and then I say if anything is invalid, then go ahead and add deciding in this case I'm a sea border. Let's make it to pixel solid. And because this is invalid, let's make it right. And if I go here, you see this email and you will feel become red because thes are required. And right now there's a no valid in the body. So that's why they received this borders tiling. So here I'm going to see selector and you see that when I add only selective, it stay invalid because this is not a valid email. So if it's a selector at and then I type yes years and start calm, you see that now that that border is gone, because not this is a valid email. And just like this, if I enter any Zibri's right here it see it's invalid because this is not a reality. You are in order to be valid, your nuclear adhere STD, B s or aesthetically, which is Internet protocol. And then you can adhere your at rest selector camp that now it has become a valid input. So you see, this is how this actually work. And again I can give it us defence telling but the all valid in blood. So I'll just give you this. I am. And that's become input daughter. Valid In this case, I'm gonna make it great. And if I say that if you go here, you see that now they have received this clean border and this name is also got the green border. The reason is because this is not required. Once I make it required now it will expect input. So that's why now it actually going to become the red and see because off difference the value I rented on a 1,000,000 units gone. So that's why they also become invalid. So let me just add here are valid developed between selector selector, abscesses dot com on actually just ignore it. So STD B s and then that's a whole giddy dot com. Right, So there we go Now I have entered the Valid Value toe all these inputs So that's why they become great. And even you could take this thing. Father, let me show you if I go here and you see that this is email so what I can do? I can open empty Spanta after that demon also after this. This, um also after this name and not what we can do. You can see that this is span. Are the sibling off this input? So, what do you goingto right here and say input valid and plus, which is going to be the ad just selector. And then it gets a span dashed before, right? So inside the spam And what do you do? Well, let's go ahead and let's add content, right, So we can add contained here. And I'm gonna add this check sign, and then I'll make this color to be green. So this is gonna be green check and let's do the same thing for this invalid. So here and I see blessed means the sibling selector and I spent and then you say before and now what we can do here we can say contained. And I would have this close sign, right? And then let's make this color to be read because this is invalid. And now you see the magic. If I go here, you see that this cross time appear just after this input and I stole I add any value here like selector. You see, it's become that green Never do the same thing here. Us is gonna be selective at Sears start car. Let me just do the same thing here which is gonna arrested. Yes. And let's go for google dot com this time. And I see that we actually got this right, Dix, I So this is incredibly cool, But that's not all. You can also validate the entire farm field. Let me show you if I just go here And if I say here, just state were added so I'm targeting the entire form. In this case, I only have one fun. But if you have more than one from then you can actually use this distended selector. So let me just go ahead and let me show you So I can just use this dark from which is inter farm and down valid, right? And here you can do whatever you want for In this case, I would say border, Let's make it five XL sonnet. And this gets so valid, right? So let's make it clear. And let me just add one more for invalid. So I will say here invalid, right? And let me just make it red. It s a bit of a go here. You see that? Now? This entire farm has become invalid because these three fields are required and they are not filled. And obviously these things are optional. So that's right during this green. Obviously, if you make them required, they were going to receive the same border. But in this case, let me just go here and let me just get rid of this even required. And they see Well, so I have type are very little here. Let's go here and see the only one field is required. Now, if I just go ahead And if I adhere any value, the whole Nazi, that everything has become actually green. The reason is because this was the only field which is required. And as a soon I entered a valid input. Our entire form has become valid. And again, if you want to show the backs that this form is valid now, well, you can go right here and let me just do something. So let me just go toe right here at the very bottom. And after this, the farm. I'm gonna have one paragraph and I'm gonna use this paragraph. Just be done to our boat, so I don't know what I can. And I want to say here this because this is invalid. I'm gonna sit here pegged off, right? And as he had before, and then what? I know I can add contempt, right? So I can adhere content and contingency. This form is invalid because this is invalid state. And if I say that if I go here, you see that now? Saying this from his village. Let me actually make this color to be read, right. If I go here, you see saying this one is invalid, right? Because of this. So let me just go here and let me add the varied one. Blessed be as wannabe before and now I can say that this one copy Paste it right here and I'm gonna say and this is going to be about it, right? So let me just go ahead and get it off it, and I think is a type of right. So, yeah, if I go here, you see that this is invalid now. But if I enter a valid input here, you see that now are saying this form is valid. So he jumped. But This is your valid and invalid so low class selector and you can use them to validate your form elements or entire farms. 19. First, Last and Only Child Selector: So this will be really talk about first trial, last cell and only chance to low class electors. And these are incredibly powerful and useful selectors. And sometimes I would like to call them little selector. That means the little select if they're only and only the first last and only child off his parents. So let me show you the estimate structure. You see that we have this heading to attack. Then we have this paragraph. Then we have this section and inside this section the capital six lace And then we have another section. And inside this section we have this an ordered list which is basically list off my five most favorite day visuals. And then we have this one lorry maps and paragraph. So if I go here that we have are heading paragraph six legs, five period TV shows on, then this doorjamb Egyptian paragraph, so not go here. And if I try to select every first child inside this body than see what's gonna happen, right, some say here border and let's make it through pixel solid. Let's make it live. And if I go here, you see that now, this hour heading to its got selected. This is a key word card selected than the very First Ankle Inc and the very first TV shows got selected. Also, this entire another list of R selected. Well, let me just go to our esteemed Mel. It's right here. And you see that inside this body, the very first direct child is this heading toe right? So that's why it is heading. Got selected. This pregnant is not going to be selected because this is not the first child anymore. But it is the parent of the Foster Strong, right? So this strong is a direct child of this paragraph. So that's why this a strong guard selected, you see, right here. So what happened? If I add another strong back and assure you if I just go ahead and add another strong tag or if I adhere M tag and let me just add a little And if you go here, you see that Now we have this keyboard and you also have this emphasis. What, Mrs Loan. You see, these two are not get select because there are the first time. So let me just go ahead and get rid of them because we do not need them. Next up will go to this a section and you see that inside this section. The very first child is this anchor take. And that's why this Anchalee got selected. Now you can see that these links do not have any child. So that's why they got in Lord. Now let's move another section. And inside this section you see that we have these two elements. The 1st 1 is not released in the second paragraph. So this is the very first child. So that's my entire on order list. Got selected, You see right here and not insides are not a list. The very first child is this list the flash, right? So that's why this the flash got selected. And if I add something inside this France, for example, let's make it up in his trunk packed. So let's Here we go. And here on my shape flash. Now, if I get rid of a do you see that flash is also going to receive that stunning because there's a strong flash is a strike child off this leg. So that's why it is also want to receive that styling. So that's incredibly powerful because their little select the very first side of it. Better now, get if you want to be specific. For example, you want to only select the first time in an order list. Well, you can go here and you can see a novelist, right? And let's go to space here because this another list is a parent. If it here, you see that only the flashcards directed and again it's electing because via saying inside is another list, right? This water was selected, but if you're disliked only this one you can make use off direct check. And if a 17 were, you see that the only the first direct child card selected. So this is incredibly powerful and this is your first child. And just like this first child, there's a last year and let me just get rid of this one. And I want to let the last set of this nodded list, which is the walking dead right, and I see that this the flash is also getting selected because I'm saying this incident another list, for instance, on our list begins like anyone right and see, because inside this list we have this only child. Well, this is your first last and only child because there's only single child. Right? So this is considered the first last an only child. And no matter which one I use from these three, this will get selected. Right? So that's including powerful again if I just get here. This is not a list. And if I just go here, you see that discard selected again? This is the only child right inside here. This pack a pack giver. But if I adhere, let's say so. I'm gonna emphasizes. Right, So I emphasize it. Let's make it whole again on you. See that? Now This load is con selected because this is the last shot off this paragraph. Right? And let me just go here. You see? Again, this is the last site This is particular, right? This is a last child, and then you go Here is another list. This is the last child. And also this is the last child. So this last paragraph is also going to get selected and see. It's indeed God side. So this is the last time. And again, if you want to be specific, like inside this section. Well, you can just go ahead and type this section, right? And in this case, things both section we're going apply because we have to check on their right. So that's why if you want to make this a specific well, the first way you can actually adhere. Plus, and for you here, I can't say section dark links or I can just use links class. It will actually work fine here. Yeah. You see that? Only this card selected. Now let's talk about only child on its very easy. You can suppress their only child, and that's it. So not inside this length. It is actually going to walk because there's an only child because there's a six of them. So I'm just go here and you see, if I just get rid of this links entirely and not for civic figure here, you see that this flash is going to get selected That because this is the only child of its parent, let me show you. Go here. You see this paragraph right here? We have strong and little right. If I get rid of this emerald here, right, it's emphasized. And a seven figure here to see that this kid is also what selected? Because this is literally the only child off this paragraph. Right? So this is incredibly powerful. For example, if I just go here, and if I get rid of this another list, right, And if I save it, you see that this pain is the only child of this section. So that's why this program is going to receive that silent. You see, it indeed received it. So this is very powerful if I just do it. And when I get it off entirely and you see that are inside this section this in order this is only child. So that's why this anomalous is going to receive that styling. So Yep, this is incredibly powerful. So this is your first child last cell, an only child. So the class electors 20. First, Last and Only Of Type Selector: So this will be we're gonna talk about first up Taif last off type and the only types who do class electors and thes Lecter, just like a child. Selectors like a first last and only child directors. But the difference is that these selectors like Element based on its type, not by parent child relationship. So let me show you what I mean. So, for example, if a target every first of its type inside this body while this edge to is going to get selected because this is the first off type of this heading toe, then this paragraph is also want to its elected. Because this paragraph is the first off its type in this body. Even you see the strong back while the strong is also going to get selected because this is the very first of type in this paragraph on then this section is also want to get elected because this is the first of life right section. And you said this tank attack Well, this is also going to get selected because this is also the first of its type. And then this a section is going to get omitted because this is not a first of its side because is really dissected here. But this another list is going to hit selected. Even this paragraph is going to get selected. This list is also going to get selected and even this strong tech is also going to get selected because this is the first of its type in said this list. So let me show you if I just go here and let me just talk this body and then I say first off, So first of type on, then let me just give some styling for in this case and I see barter on let's make it topics and solid and let me give like And if I go here, you see that there's the heading tocar selected because this is the first of its type, even this paragraph, because this is first of its type and the skilled, because this is a strong you see right here This is also first of its time, this entire section Well, because this section is a first of its life, the very first ankle ing. Well, obviously, because this is a first of its type inside this section. You see, this section is Lord God selected. You see, the section is not got selected because you already have one section right here. And if I go here, you see this? Another list is called selected because this is first of its type. So this is our one ordered list and then the very first list because this is the first of its type and also the strong back. You see this flash big Because this is the first of its type inside this list tag. And also this paragraph because this is the first of its type inside this section. You see, it's also got selected here, So this is your first up tight again. If you want to select any specific type, for example paragraph Well, you can go right here, and then you can type your paragraph. And if a seven figure here it wanted, like this 1st 1 because this is the first of its type inside its battered, it's right here on then. This paragraph is the first of type in said this but India section and see this two paragraph got selected. So this is your first off life now you can easily guess that there's a last off life. So I can just go here and take your last now again and just be so now these two court selected because these are the only paragraph inside their parents. So that's why they are the first last and only right? So this we're going to selected anyhow. But if I get rid of this pattern raffia matted seven figure here, you see that this got selected because this is the first. Obviously, this is the last. This is also one selected because this is the first and last the scale. It is also going to sleep because this is the first and last. But if I just get here and again if I add something like let's say are strong right after this on Well, in our 2nd 1 is going to be selected, not the 1st 1 So here you see, the 2nd 1 were selected, not the 1st 1 Next up we have these Linc Energy. It selected the last of type, which is this report. So this is the very last link here on benefit. Go here. You see, this entire section got selected because you see this the first of type dissection, but this sexual is the last of type. So that's why terrorist section got selected. You see, right here on then into the section. Obviously this another list because this is the only type. This is the first and last time. But if I hop, eat here and if it based right after it about this, 1st 1 is going to get ignored. This last one, it's got pregnant. Let me show you. You see, the 1st 1 got ignored, but this last one actually got selected, You see exactly. So let me just go ahead, get rid of it. And then this backup is also going to get elected because he sees the last of its type. Right? So that's pretty neat here. So this is your last of type. And now you might have guessed it. Yeah, there's only off type, so I can say here only off type and not finger here. You see that the only of its type has got selected. So you see this heading toe is the only off its type inside this body. So that's what's getting selected. Even this paragraph is only off inside this parent. So that's why this is also going to get selected. This ankle tag is not going to select because they are not the only. There's six Africa Tech. This section is not going to select it because there's a two section, so there's not only this another list is the only off its type. So this one is going to get selected and this list is not going to be selected because this is not only of type, but this strong is going to be elected because this is the only off type inside this list and even this paragraph is going to select it because this is only off type inside this section. So let me show you. You see that is heading toe this pickup are selected, even this cable, because that's only of time. You see this entire or not unlisted car selected because that's only of tight on this flash , which is you see here, this is strong pack is got selected because this is only off its type inside this list of R selected on at the very in this paragraph because it's only of pipe inside these sections, So this is also going to get selected. So this is your first of life. Last of time and only off type select us 21. Nth Child Selectors Syntax: So in this movie we'll talk about and child selectors, and these are incredibly powerful when it comes to style, your repetitively data like a list or table, and we have little four video dedicated toe and child selectors. So therefore, you know that you can select fast, last style or only child. Our first off dive last dive or only type. But what happened? If you want to select a specific list number in any list or a specific role in table later , well, you can use and child select us. So here I have a table off my favorite TV shows and is a total of 10 TV source. So here you see that as a very heading the divisional name, the lead actor in that TV show and then the brief synopsis of that particle, a TV show. And here we see that we have out of here and the lead actor is Stephen Amell. And then we have the start, synopses or description off that arrow TV show. So let me just go here, and I assure you the weapon and you see it right here. So I see the David Show lead actor and synapses on. Then we have these that my top 20 visuals. I really enjoyed a while. I watch them so that's I just based it here, right? So there's arrow then the lead actor is different. Amble on then the other synopsis than the flash Supergirl, the walking dead, the strange supernatural as a 70. It's ramping, breaking bad and experts. So by now you know that you can see like your first child and the last time. But what happened? If I say go ahead and like the torch child, Well, in this case we can use and China's selectors. So let me just go right here. And because you see that these are the table role and we want it like this the flash. Then I need to go here and I want a table rope. And then I'm not saying here and child. So now and child is there. Now I need to pass that which one you want to select. In this case, I want us like this, that the flash on you see that the flats is the second number, right? So if I just go here and if it's like do here, let me just give it a background, something like this off gray. And if I save it And if I go here, you see that there's a sun unexpected behavior. You see it selected this arrow. Why is that? Well, because, technically, this is the second door I'm sure you are talking about. Here came alone on the second child. Let me just go here at NBC that in table. This is the first child. This is the heading on. Then This is the second child. So it's actually counting from the very beginning. Right? So if you are to select the flash, then you need to go right here, and it will say toward child, right? And if I seem to recall here, you see that the flashes got selected because this is the first rule. This is the 2nd 0 on this is the hard roll. And again, if you want to select list of the walking dead while the walking dead is the fifth number, if I go here and I get easily change into fifth and we see that now, it's actually got selected. But what happened? If you want to select every even or or draw, I mean every alternate Coro, we'll show you. It's very easy. You can use art and even keyboard. Yep, it's a odd and the same if I go here is that you see, that is one to select every single art. So the sea the first waves are the target is on the 15. It's hard. And 7th 9th this is the last one. This is the 11th right, and we have a pretend TV show, but we also have this one heading into Total is going to 11. That's why it's also elected the last one. And again, if you want to speak on the even, well, you can use this even cured. If it's a typical here, you see that now every even row is got selected. This is the second or fourth row 6 8/10 That's it. So you can use this art and even cabled. But let me give you more practical examples. So you see that this lead actor column is very small, so why don't they just go ahead and make it a little bit big? So let's go here and what we can do here. You see, this lead actor is this yet which is the second child are also here. This second child, right? So little target this t it. Second child on the steely second child and licking MENA paid its weight. So we just got here Table data. You see, this is the table that I'm talking about here. And then I will say here and child. And then what I want to hear. I must find a second child, right? And then I can style. So I'm gonna say here, Richt, I like to give you some kind of sentence, and this is, let's say, 25% which is a lot. So if a seven figure here, you see, that's not become quite big. You see, it's pretty interesting. It isn't it. It's really good. And now I can go here and I can Orders like the 1st 1 right to the limit is go ahead on selected, and here I'm gonna say the 1st 1 also, let's actually make it small here. Let's make it 20% because there's a three child, so first and second is going to be 40% and the last one is going to be the 60%. I think that will be good, right? And I see that now. 1st 1 he's got 20%. The 2nd 1 has got 20% of it you can easily manipulated. They're very, very powerful. And if you want to go even farther, you actually make this a bold already can make this, Let's say italic. You can emphasize this world or you can change the color fit. So let's say I'm going to make it the blue and underlined So it will look like these are the links, right? So let me just go ahead and let me ask you just walk with it. So, city, is that the faster child somewhere go easily here and I'm gonna grab them right? And I'm not just pasted right here. And then I can say here color is going to be Dodger Blue. Let's make it Dodger blue on. Then let's make it takes decoration and honesty here. Underlined Right on. In order to give that link effect, I can set your cursor to be pointer. It will give it a losing that these are actually links. You can click and gonna visit the TV shows, right? So see, it's incredibly powerful and can select this one to like Let's say, Make it bold if you want, right. So again I can a carpet and I go right down below and you know that I must say here second child on I can set here for me to wait to be bold right? So let's make it bold. Offensive it if I go here. You see that now this foundry it is actually got bored. So these are the basics off and tell selector. Now let's go to the next movie will ensure you how can match the pattern using n child selector 22. Matching Pattern With Nth Child Selector: so this will be I'll show you. How can a match Badham with an child? Selectors, let me show you what I mean. So here is our rep it and this is very be left in the last movie. And now you know that if you want to select any specific role Valley confuse and Child selector and then you can it's passed a specific position. In this case, If I don't like this one, this is going to be the forth road. So I'll pass their fourth and selected. He was alone that art and even Cheever. So we can use our cable to select every Arturo or even keeper to select every even row in this case, every even Rocard selected. But what happens if I say that? I want to start with this 1/3 row and I want you to select every told after that we start with this total and then every told Oh, God selected or what happened? If I say that I want to select every fourth row or 15 or 10 through right, How would you do that? But that's what I'm gonna show you here, so let's just go right here. and again, we gonna make use off this and child. So our target is stable. Robe, and then I will see it and child, and I want every Todd rogard selected. So in this case, I'm gonna pass the A three. But now, in order to repeatedly style it, I passed it. Yep. This is the secret. If we use their end it, we're going to match the pattern. I'm sure you I can just go ahead and I can say background, great background and save it figure. Here. You see that every told item got selected, but in this case, it's not. The region is because we have quality using this, even keep hold on. Let me just get it off it. If I go here, you see that every 100 0 God. Selected. So this is a start. This is the sixth. This is the ninth on distillation right now. What happened? If you want to every photo, right? So it can start with here and again. You see, that is the first row, second row and talk. But I want every fourth road car selected, so I'll start with here so easily. Just go here and changed to four and then every forum is actually going to select it. Honesty that every fourth that start with this photo and then it's going to select the Metro next is under 12. But there's not 12. There's only 11 So that's why it's gonna escape it. So this is one case. But what happened? If I want O start from right here and I want every second rule Is God selected from here? Right? So which person is this one? Let's say it is the 1st 2nd card. 4th 5th and sixth. So what I want I want to start from sixth and then after six every second rogard selected. How will you do that? Well, Afinitor said offset. So let me just go here and I'm sure that mean So Now you know this is a four n. But in order to set off set, you know, to use this plus sign and we want to start our countdown from sixth throw bypasses +66 is offset. And now, because I want every second of course elected, I need to set here. So what I'm saying here that start from sixth rope and then every second row de selected and then applied this styling. And if I say that if I go here, you see that now it will start from this sixth row and then every second will actually going to receive that styling. This is stab powerful. If you want to start from this town or fourth, let's start with fourth, right? If I go here, let's start with fourth, right? If I save it now what I'm saying, Start from fourth row and then every second element got selected an easy start from fourth and then every second you want every time. It's a very easy. Just make it three and now started it for right. This is the fourth row on every tart. This is start. This is turned on and so on. Right? So it's very powerful. And again, if you want o build that odd and even give er By using this elector, you can easily do that. You can simply say here to end, which is going to build that even given any. See, every 2nd 1 is gets record. And if you want to build that order, one that will start from the very faster role, that's very easy. Just passing opposite Start from one right as like every 2nd 0 and always see that we have built our our keeper. But I want to show you something really important. Let's go here and let me just create fuel rules here. Right? So after this section, I'm gonna create another section and sex and unlikely this paragraph. I did not feel well. Let's say then what's done was is enough and let's copy invested a few times. I think this is enough. Right on. Don't know what a man who hear that inside here. I wanna make this etch to Dad right with heading to back. And I'm gonna pass here something like, you know, five farts, right? And expand it and then let me just add it, right. So again, you see that this is a very different pattern, but you can easily recognize it. Let me show you if I just go down here, you see that these these normal one is actually paragraph and these border on our headings . And again we have these paragraphs, right? So now being inside this a section and lemon that you just give it a unique plot So we can his retargeted are muscle mix. Right now. You can go right here. Target that makes class and into this mix. Last week in a two hour walk, so I'm appeared on the paragraph and then I was here and child. And here, unless a select every 2nd 1 and I'm gonna give you the background off. This has to do it. If I say video here that it is indeed started from this 2nd 1 which is even. But you see, it's also like to the third paragraph you see, now it's like a photograph. And then the 5th 1 on, then the seventh and ninth, right? So, Bill here it was even. But from here, it was hard. Why is that? Well, because this is the child selector. This is not the type selector. It means that is the only going to count the child, not type, right. So don't stop contact from here. And this is the 1st 1 which is not matching here because he has said every 2nd 1 So this is going to live this one. And since, like this 2nd 1 then it's going to leave this one. It's going just like this one, but this one is not paragraph, Right. So that's why it's gonna leave this one now the next one is actually going to live, then see, like the next one, and that this one is not paragraph. That's what's going to leave this one, This one, because this is the 2nd 1 And now it We're going to select this run. Right? So if I get rid of this one, that's too. Now that things would have happened now it will not going to select this paragraph. It will actually going to start and select the next back. I'm sure you save it for diarrhea. You see, they're difficult down here. You see that? It's actually left that package off. This is a little bit our behavior off and child, but that's what we're gonna talk about in next movie 23. Matching Pattern With Nth Type Selector: So in this movie, we'll talk about and tough type selectors. So this is where we left in the last movie that we have this paragraph element and then this heading toe element mixed into this section on you see that? We're targeting every second paragraph inside. This makes a section which is right here. And let me just go to my webpage here. You see that? Now it's indeed started from this second and then it's actually going to target every 2nd 1 And because these are the different type of element, it's still gonna get come. It means that every 2nd 1 So this is where the target this is gonna target. This is going to target, and then this one is going to target. And because these are the different type and were specifically saying that I would only the paragraph. That's why they didn't receive this telling. But still Digard count, let me show you if I get rid of this paragraph here, if I say that you see that they're still going to get counted, see, they're getting count. But because I said it here specifically, paragraph. So that's why they're not receiving the styling But they get count because their child and yes, and yet child, not time. So if I go here and let me do something, let me just get it out. This our 4th 1 and you see that we only have this three heading to that. So never go here. You see that the 2nd 1 is selected, then now this was going to get selected in this case. Obviously it is not a photograph. So that's why it's gonna omit. But after that, it's gonna meet this one and this card selected. You see, So here Now it's proved that it's not selecting the pipe. Let me just do one more thing. Let me actually get in on this. This two more because this is one is actually enough. So if I go here, you see that now it's like in the 2nd 1 that omitting this one and then now it's like that distort when I got off, which is not good, right? So how can you make them select by type, not by child. Well, it's very easy. We have one more bitter and tough time, so we're gonna go ahead and get rid of it and Institute Asi and tough type. So now this is the selector which we're going to select every second item, which is a type off paragraph and have a save it for you here. You see that no matter how many different type of element will put inside, it will always going to select evenly. Right? So, see, it's like this one. And after we have this different element in this case as toe, but it is still going toe Army Dis completely is going to counter this one based on type and then selected this right, So this is incredibly powerful. And again, if you want to start from the third paragraph and select every 2nd 1 but it's very easy, you can set off set here. So I want to start from hard backing off and every 2nd 1 for saving figure. Here. You see that it's starting from the third paragraph, right? So this is the 1st 2nd and tar, and that's like every 2nd 1 You see, it's incredibly powerful, and this is your aunt off type selector. But what happened if you want to go backward because by now you have seen how to go forward . But you can also count backward, and that's what we're gonna talk next 24. Counting Backward: so this will be I'll show you how concurrent a backward with anti child selectors. So let me show you what I mean. So his on their page And again we have this one table and you know that you can count forward. But what happened if you want to count backward, for example, If you have a thousands off roll and you want to count backward, how will you do that? Well, let me just go to my statute here and I'm a target table room and then is going to be and child as you know, right? And then we can pass some value here later. But for now, let's give it a bag around off hash do d d which is going to be the grace background. Now, let me tell you something I haven't told you yet. So you know that every passing to M, which is going to select every second rope, you can see every even room, right? But what happens if I pass yet? One end. Well, it is going to select every single row. You see every single room. Why is that? Because this is one. And it means that to select everyone. And if I get rid of this one, and if I just skip it and it's still contests one end by default, right and again is going to select every low. And even if a passive offset, for example, I want to start it from, let's say, at the fifth rope, You say that now it's going to start from this dolphin through and select everyone, so that's pretty neat here. But what happened? If you want to count backward, well, you can use this minus sign or right here if I see a minus and not what you think was gonna happen when I get it to start from this 50 go. But it is going to count backwards. It means it's going to select a free single row backward. So if I go here, you see they're not starting from this flip through. But now forward 321 actually got selected, so it's actually counting backwards. Even if I go here. And if I pass here 10 let's say 11 because we have 11 Row 10 TV show and one is our head of so that I was going to start from this 11 throw as go. Just don't backward. So that's how we can count back over. But let's make it to end. It means that it will start from the second row and count backwards. So let me just go here and you say it's counting from here and backward. Let me do this. Do something. Let me make it seven. So it will start from seven and then select every second row backward. Right? Pacifica Here, you see, It's actually going to start from seven. This is the seventh row. So let me just counted this a four seconds start. 4th 5th 6th and seventh. And then it is going to come back with every second row. Well, this is good, but it was still counting forward and then backward limbs with the media. So I'm saying here, start from seven. So what's happening here? Going forward from the fading fast? This is the 1st 2nd 3rd 4th 5th 6th and seventh and then counting backwards, right. But not for you here to see if you will. Backward from the very last child you see, this is 1 to 1, 2 3/4 5th 6th and seventh. So it should start from the seventh and then we'll backward. So how can do that? Well, we have dedicated. Electrified. Yep, it's called and last child citizen and last child. And let me just get rid of this minus here. Now what? It's saying that start from the very last style com seven and then select every second who afterwards, So it will start from the very last. It is the 1st 2nd 3rd 4th 5th 6th 7th So this is seven. It will start from seventh and then count every second. And if you go forward here, it's actually 1234 50 right? So previously it was starting from here because obviously it's carting first forward and then backward. But because we use that anti last child, it's now counting from the last child and going backwards. So that's a very powerful, backward, dedicated and child selected. Let me actually just said it. You know the opposite. So don't start from the last tor child in this case. Start from right here because this is the Torah. Sell on, then recount every second. And don't forget that we're using her only child operator. It means that any other type will also get count like the last movie, right? So let me just show you what I mean. Here, another section again. I'm gonna make it really quick. And I must say it here. 10 watts and quickly just go ahead on it's actually at least, right. So let's give it a least here. Doesn't matter for me. And I'm not said here. Etch Do right And I would sit here. Lord him. Let's make it our own. Like two words. It's very fine. And we go here. You see that at the very bottom they have this list and then we have this time. And if I just go here and just give it a class so you can easily, you know, make it unique Something that makes again and figure here, let's make it dot mix and an inside this mixed amounts like this list child on. Don't say here and last child, right? And then I must say, every second element Afterthought offset Honestly here background and let's make it hash. Did it. If I go here, you see that now it's Indian started from this target one now, every second and so this is the second and this is the 2nd 1 And this is the 2nd 1 It's only this one. But if I add one more here you see if a seven figure here you see, if I add one more here, it's going toe with this one because it's not type selector. That's very important. Understand? Let me actually adhere one break here because it's really not mixing up. If I go here, you see that market break any See? Yeah. This is the same problem. I have explained the last movie. So what is the solution off it? Well, way we have it. We have dedicated last off type. Yeah, we can see here. And that's last off type and not just David Vega. Here. You see that now is gonna happen, is they had to start from this the 3rd 1 and then every 2nd 1 Right? So this 2nd 1 now it is going to get trade off this time because this type are not longer accountable. But it will count this one and then it We're going to select this one because now, by using this and last off type, I'm also dieting. The tight, which is the in this case list So this is your aunt last shy and and last off type and gonna use them the count of backward and even omit or include certain type elements. 25. Root Selector: So this will The will talk about root selector and this is one of my most of ferrets CSS selector have ever used in CS is so what is root selector? Well, by using a route selector, you can define your own dynamic variable and provide our value off it. And you can use that variable in a bid on your style. See? And once you change the value after variable inside this room selector than everywhere in your styles it it automatically get updated. Let me show you what I mean. So let me just go over right here and here attacking this route selector and then inside these through selector, I will be able to create my variable and in order creative variable and use thes doubled as shine and then I can give it my very billing. In this case, embassy had primary color. Now I can define the primary color in this case, let's make a Dodgers room. And now if I want to use this primary car But it's super easy now I can go here. You see the state heading toe? Well, I could define my heading to here and then I can set this color. And now the color property is going to be the valuable and rich variable, well, this primary color and then go. If I go here, you see that now it's accurate on into Dodger Blue, but does not where the magic is. If I change this to B, I'm here. You see it automatically get changed into line color. You see, it's incredibly barbell. Even I can create some kind of, Let's say that tree here and let's do something like kind off five ports. And if I go here and here, let's say I use this same variable on in this tree. I can just do it here and you see, it's also interpreted. And on any time, if I won't be changed my primary color well, it is a one single place. Let me get here, Bink, and you see that every rear its get updated. It's incredibly powerful, and again you can store anything here, for example, if you want to create phone sized, so let's say I want to store it for title. So for title, it's going to be around at the 40 picks in, so all of your title is going to receive this 40 pixels now in edged All I can say here for in size and then I can use my variable on which way they will. Well, it's a title. So let's make a title. And now you see that is turning toe 40 pixels. See if I just click here, inspect element. You see, it is indeed 40 pixel. You say right here. If I get rid of it, you see, it's became a small But if I just turn it on, you say it's become big. So you see that this is your killer on Let's make it off pataca last time to see how bad our culo and let's make it something like 999 which is a kind off grace darkish color. And now I can go to right here against a P. And then I can set here color and then each color. Well, economies were ready over here, and I'm going to see here bad. So if I just got here, you see that didn't receive this color. See, it's incredibly powerful. Let me just go here and let me just make this sounds like a tragic globalist. I love d'argent so Here we go. If I could hear you see, I'm gonna have this Dodger blue. And for some reason, if you want to change the car of these links, well, you can go right here and let's make it link. Color some a C here, link color, and then let's make it pink. Right on. This is a color off boom which is one of my favorite cosmetic company. I say color, and now this case again, I can use my valuable. It's going to be the Lincoln and 1/2 ago here, you see that they turned into it. But now let me show you. I can just go ahead and I can She need this important selector and Africa here, you see that indeed received that pink color. It means that by using this variable, you can also change this a second value, which is right here. OK, so these are your route selector. So go ahead and use this route selector to pretty find your very built and its value and used this variable instant so anytime in the future. If you want to change its a color or this value well, you can just do it right here, and it will get updated automatically everywhere in your styles. It 26. Target Pseudo Class Selector: So this will be talking about targets too low class selector and this is fairly new, but a very useful selector. And I really love it for the reason what it does. So have you heard about anchor school? Let me show you. You see that there's an ordered list and this is basically a simple man. You were it saying basic selectors attributes like Combinator and pseudo class later. And see that I have added this each other. Really? When you click on this particular menu, it will want to take certain parts off our weapons. For example, it would look on the very first basis Elector it was going to take you here because I have linked this each other. You see this be that asked which is basic selector. Then we have this aid as as which is a tribute selector. Then we have this see death as if it is commented selector and then we have this be DSS is a pseudo class selector which is right here. So now if I just go here and if I click on basis selector well, it will take me to the basic selector That's illegal If I click on and select er we're going to take me back to boot selector. But you see that there's no way I can know what that fear it's taking me. Indeed, it is actually going to take me right here, but there's no visual indication. Well, now, how would give the visual indication that we're exactly focusing on right now? Well, for that, you can use target selective. So here, I'm gonna use this double column and then tag And then what kind of visual indications you want to give you a user, for example? I must background and let's make it go right. And I figure here you see that right now I'm focusing on this pseudo selector. If I go up, let me take a basic elector. Well, now BC is, like doing are selected If I click on a tourist sector, is it accurate selector? If I click on this community selector you see, it turned me company this Lecter click on basic and against Take me basics Director. So this is very powerful because now I have a visual way to see where I'm focusing right now. Even if you give some kind of his tiling for example, Let me just make this phone size and I want to make it a little bit. That's a tweet him. And this is quite big, right? If I go here, you see that taken business selector. You see it to look like this. So this is kind of a modern looking. And if I click on activate selector, you see, foreign size is quite big. And then we have this settled back down at the behind of her heading to back. So this is your target selector is, and we're gonna use it. Well, you can use it in a long debate if we have kind of multiple absolute links. Well, you could just use the selector to give you the use of visual indication that where they are right now in your webpage. So this is your target. So no class director 27. Empty Selector: So this will be we're gonna talk about empty selector, and this is incredibly simple, but a useful selector. So what it does? Well, let me just go here and let me just target this empty selector. And I must say it will find anything. Just make it background to be black. If I go here, you see that none of the background is actually got Blake, because one of this element are empty. So let me just go here and let me just create a one Dave right here. This simple death and this is empty. Right? So let me just go here. And if I say here, Dave, let's give it a bit And High Star said it is going to be 50 pixels on the height is going to have 50 vixen. And if I go here, you see that? Now we do have this black bag down. Let me show you that this is telling is actually kicking in place. So if I make it red, you see that actually going to be Red Sea? It's turning to read because there's a deaf. It's empty. And because we got a size off Dave and there's no background. It's going to feel with this empty car. But let me show you something really special. If I add only single space right there, you see what's gonna happen. You see that red selling is completely gone. Well, let me just show you something Here. Let me to school here and let me just copy it from there. And let's best it down right below and let's make it background. And in this case, I'm not. Make it green. Now concede that Green is going to get there because this Dave is not empty because there's a space but the factory of the space here. You see that now it's going to receive that because this is not empty on because his also background. But we also applying background right here. So that's why this background is already this one. Because this Dave is now matching this condition. That's why this disturbing this background Red So what really the practical and most importantly, use off this empty selector? Well, let's say I'm gonna get rid of these. Melissa Benn's right. I mean, the lead actor off Supergirl. So let's go here, and I'm gonna grab this Supergirl on. Let me get rid of this lead actor name. Right? So now you see that this field is empty. Any see this time is already kicked into place because this field is empty. It's filling with this for red color, right? It's right. Here they go. But if you want to just make it a specific toe table that only rarely can use this DD and then you can see here empty and which styling? Well, in this case, let's make it background, and I'm gonna give it a Carter off kind of our fight. Right. Here we go. Here, you see. Now we have a very shuttled, kind off white which indicate that this cell is empty. So Yup. This Is there some scenario where you can use this handy, empty sector? 28. Negation Selector: So this will be we're gonna talk about negation, pseudo class selector. And this is incredibly powerful, useful and super hand. This is selector. You will love it. So let me assure you, if I go down here you see that? Now I have these two images right here on the very first inmate is actually have about back named Black Puppy. But the 2nd 1 do not have this attack. How will you detect? It was very easy, Congar. Oh, right here. And then you can target the image and then you can use this litigation selector which is not and then reach attributed. Looking for in this case, I'm looking for this ELT attribute, right? So you know that in order to select attributes unity, use thes square bracket and the new each attribute help. And now just add whose tiling. So in this case, I'm not saying border. Let's make it do pixel solid life. And if I go here, Do you see that this 2nd 1 got selected because the 2nd 1 do not have that ELT attributes in it. You see this one? So now if I just go ahead and had here this l attribute is gonna be right, Poppy, never go here. You see that? That styling is gone because now it have it. Right. So this is incredibly powerful. Even. Let's say this is the one. Pack it off and then let me actually add one more here, so I'm gonna just adhere 10 words. I think that's enough and let me duplicated. So now I have total fourth paragraph in this rip it This the 1st 2nd part on the very And you see, this is the 4th 1 right? So now let's say you want to a style, all the paragraph except this one. Right. So you see that this little half have this class attributes. So what again? So you can go right here And even target is paradise off and you can say not and who do not have this class at him, right? And then you can just pride your styling. Let's make it border to pixel solid line on day. Then let's make it color to be something like a life in Africa. Here. You see that except the very first paragraph which matches this criteria all other paragraph have received. This is tiling. You see, So now what happened? If you want, just like this one except this one, all other paragraph is going to receive the styling. But it's very easy you can use and child selector. Yes, it's a very powerful so I can say and child, in this case, let me just show you that it start from here. So that's the 1st 2nd 3rd and fourth. So this is the fourth child. So now I have to say, had four right? And if you haven't watched that and child selector, you should watch it because they're I have explained. And child incomplete depth, nothing of Tennessee. That except this 1/4 child, which is this paragraph or other paragraph got selected again. You can target with fire and off type, but I have already explained it in Antioch. Directors of into school here and give it a look. And now what happened? If you want to select something based on this, you know, class money, that's pretty easy. Yeah, you can just go right here and you see that the secular tax, right? So how you target text in stances is well, it's idiot. Text writes a period text. That's how it selected class. And if I go to school here, you see that I am a The very 1st 2 classes is going to get excluded from the styling and other classes were going to receive the same this time. So this is incredibly powerful again. You can use attributes, electors, for example. We see that you want those tile every single angle, Inc inside this photograph attribute value on Let's make this scenario here. So I'm a target all the length, right? And all the link who do not have this. Oh, in its hlf attitude, so each other attributes and again, in order to match that substance, I need to use this Estrich site and not this is doubled or so. Now what will happen is that it will going to get rid of this Google Facebook and this book because this book have this double or in this HR active value, this Facebook also have it here, and this will also have it here. So accept this Google Facebook and book every other. We're going to receive these tiling in effect here. You see, that's actually true and even let me show you want or something. So Let me just go here and let me just get rid of these a pregnant, because I do not need it any more. So let me just get it off it. Now I have a very less paragraph and again structure. Let me also get rid off this styling. I do not need it, you see, Not very clean. So let's say I want to give it to some kind of bag. Now, let me show you if I go here, you see this actually have a link class? I can go here and I can easily talk it. This links, Let's make it background and I'm gonna give it a line. And then I'm are at some kind of patting one gram everywhere, right or wrong. But now what I want is that I want five for them. Difference between this. Each links. But those five grams will not get applied on the top and at the bottom. How will you do that if it does go here? And if I say ankle ing, let's say marching mortem. And I need here five. Right. So this is what exactly we're looking for. And you see that now we do have it. But we also have this five game margin at the very last anchor child. How will you get rid of it? Well, you can use not selector. Yep. You can see here it dark and then not which is indication. And then what he can say if it is not the last child down a flight. And I figure here you see that actually can you see? It's incredibly powerful. I'm saying apply this tiling on ankle take which is not the last child. And because all of these are not last child, they were going to receive that five from. But this is the last time, right? So that's why it's not going to receive that margin water five from. And this is the power off *** and selector. 29. Before and After Pseudo Element Selector: So in this movie we'll talk about before and after super element selectors. And if you have been long enough in CSS or a development industry than the chances that you might have hard about them or you might have used them in your project, practice this course. But anyhow, I'm gonna cover this two incredibly important and useful selectors in CSS. So these two selectors are called Sodo element selectors. That's because they worked with Element. It means that by using them you can add something dynamically before or after an element. So let me show you what I mean. So here's our simple rep it and we have this one paragraph and let's say I want to add our tip bad at the very beginning Off this paragraph dynamically. How well do that. Well, I can use this before Super elements. Elector, let me show you. I can go right here. And then we're gonna add that big batch right at the beginning. So I need to select this a paragraph so I'll go here and I select this paragraph element and then I can use this a double Colin two times. It's also called a reservation operator in PHP. But you can also use only one time. Well, I prefer using this one, Colin operator, so I'll stick with that. So now I just stay here before and inside here will write hours tiling. Well, let me tell you that before and after selector have one unique property, that name is contained. So you will find this property only used in before or after supplements selector and inside this contained you can type anything you wish. For example, I'm just gonna say here the steep badge, so I'll just add your tip and not of a saving. And if I go here, you see that this tip got added right at the beginning off this paragraph, which is cool, but we need a bit speeds between this a tip and a so we'll go ahead and well, add the space that we see that now we got space, but again, we want to make it a badge. So let me go here and let me just give you the background. This is going to be gold. So I love this gold background. And if you go here, you see that we got this gold badge. But we need some padding, right? So for battle What? I'm a do. I wanna adhere around. Do you 0.3 Damn our top and bottom and one them in the left and right. And if I say we figure here, you see that now he got it. That's called notices. Go here and here. I'm gonna have some border radius on the border radius, and I want some kind of a bill kind off our shape, and this is actually look like a rectangle, But I want a pill. So I'm not saying 100 pixels is aboard radius figure here. You see, the exactly giving this bill kind of effect, which is a really cool and actually make this afford a little bit border. So I'm gonna see her for weight. That's going to be bored, right? If I say we didn't come here, you see this house look And if you need some space between the spill and this scatter, but it's very easy can simply say a margin, right? And that's why we let's say one them right. And if you go here, you see this house look And if you are no dick, please. Little bit attacks to size Well, you're totally free to adapt. So on a cellphone. Besides, let's make it to the point eat ramp which is a little bit a smaller than the original one. And it's not like this, you see. So now this is how correctly at pills and this is totally dynamically added. Even you can't select this one because this is a dynamic begins like this one. Because this paragraph locating estimate Don But this paragraph is dynamically added by CS is using this before selector. So that's why you cannot select it and again even just go on display with it. So let's say I'm a area has shine and I was just to make it one right ever saving You see, this is a hatch one paragraph and again if I adhere one more paragraph Then I received that same thing in both Pergonal. So for that reason, you know definitively specific. So you can use the pseudo class selector which is first off type. So it is going to select. We read the first paragraph and if I say that figure here, you see that now we have this tip badge only in the first paragraph, not in the second or arrest are so this is incredibly powerful. Let me just show you something I can actually you have to also say here, open court. So let's say open and gonna be quote right. So it's gonna add open court right inside the step. You say open court and I'm gonna use this after selector toe, add the clothes, Let me show you. Let me just grab this one and I go right to here. I must say, after install open, I'll say here close and not very saving. You go here. You see that? Now they got this close court. But let me just give you one awesome example off this after serving 11 selector in taste links here. So let me just go here. Let me just get rid off it. And instead, off this open court, let me actually just make it tip because that's what I like so much. And 70 just go here and let's say we have all this link and we want to display the actual location or the Ural off this link after this a text. Let me show you what I mean. So let me just go here and you see that these are the links, and these are the actual location. So these are the event address. And if you want to dissipate these apparent reason dynamically after these text, well, we can just go right here and we can target the ankle tag. So it's going to be really specific. And then I'll say here after, right? And after what you gonna do after I want to use this contained. And then we need to access a visa, attribute value off each other. Well, beginning use after function. I'm sure you I can target this after function. And here we need to give it that bag. In this case, this is a chart of someone stay here, Sharrif. Right? And if I save it? If I go here, you see that? Indeed. We have the location off that particular link. So let's go here, let me dissipate them. So what I will do. And when I use this little column than this parentis is. And then again, this Adam call and here I am again. Use this and then this parentis is. And if I save it, if I go here, you see that? Indeed we have it. The limit is actually, you know, get it of this extra space from here. So let me just get it off it saving if I go here. You see that? Now we have it in order to make it look really good. Let me go ahead and let me just do some styling, some Nazi for in size. And let me just reduced it to Gina point for that, which is very low. So not see the pretty small Let me actually just make this color to be all right. So color is going to be read. Save it, Ellen, Just make this 0.5, which is a little bit bigger than the previous month and see how this is looks. So this is Dan indication in the Ural off that link right after this text, which is incredibly powerful. And again, you can omit any attribute value right here. In this case, we're omitting these each other. But if you want, you can actually or make this class activate value. So let me show you if I just say changes to class here and if I say that figure here, you see that how getting all the class at better value right here. So let me just go ahead and get back to a tariff Any up. This is your before and after Sudan elements direct us. 30. First Letter, First line and Selection Selectors: this will be we'll talk about first later. First line and selection. Pseudo element selectors. And these are the three very useful ceases selectors. And we will start with first letter. So let me just go here and you see that we have these 21 paragraph which have two sentences . But I need more sentences in order to work with. So let's go here and let me add more sentences. So for that I'm gonna adhere. 30 more Waas. Let me just for Mrs Document and then we go as safety and not go here. You see that? Now I have total five sentences, which is quite enough. So now let's say that the very first character or the very first letter off this paragraph I want to make it drop gap and we can do it too, using this first letter. So let's go here, and I'm gonna go to my style and hear from attacking this paragraph. And then the first letter is going to select the very first letter in that paragraph. And then you can put any style you want, for example, honestly, color on, let's make it right. And if I just go here you see that the very first letter off this paragraph become red, so this is very good. Now you can actually make it big. So let's make it far size to be three there and if I go here, so it's quite big. But I wanted to appear in the very laughed. So what are you know, I can float it to left. So let's say here float and left. That's fine. If I go here, you say that now it's 42 left. This is what exactly I'm looking for and let me just change. It's a font family. Here's honesty. Have fun, family and want to keep it safe and easy. This is Heisler. So that's pretty neat here. And let me actually add some marginal right here. So the same margin as gonna be right, Let's make it one them, which is quite big. So I see that now. He cut this margin one gram that's actually quite big. Solomon actually make it. Let's make it 0.5, and if I go here, you see that now we have quite good magic. Also, let's add padding about one them in top and bottom on around zero point freedom left, right? So let's go for here. I must patting. Let's make it one time top and bottom and 0.3 them left, right. If I go here, you see that now It's just a little bit down here. It's quite done. So let's go ahead and our problem. Bottom. Let's make it a 0.5 because I think that will be good enough. Yeah, there we go. This is not good enough. So this is called a drop cap, and this is very powerful again. If you want something even more a specific, let's say, if you're their background off something like a black well, you can do that here. And this is how it's gonna look again, even add some border radius. But I think without it it's looks really find to me, right? Let me just get it off it. And there we go. So this is called drop cap and again if I just go here. And if I add even more paragraph here, if we're going to add, let's say that drop cap into the second paragraph two and you know that how can I actually get it off it right? You can use type selector so you can just school right here and you can use this first off type and then this one operator. And if I go here, it see that only the first paragraph is going to receive these a drop cap and the stuff it is going to remain the same on this is a great tablet for writing your blog's or articles. So this is how you use first later. So the elements Elector. So what about this first line? Well, this is just like a first letter, but it is going to style the very first line in the paragraph. Let me show you. Let me just go here and instead our first letter. Let me just make it first like, And as soon I do that, you see that now is actually going to religion baking, which is quite a big. And let me just make this one size to be one around here and figure here. You see that the very first line of the paragraph got selected and doesn't matter the skin size. It's always going to select the very first line, no matter what the skin says is So this is incredibly powerful. It can do a lot of talent and different stuff you want. For example, if you want to add, let's say, text decoration well, you're totally free to do that. Let's make it underlying right. And if you go here, you see that now it's going to underline it. If you want to line throat well, you can do it again, citizen line through and then figure here. You see, that's going to cut the very first line. And if I just decrees that you say it's still going to cut the very first line only, so this is incredibly powerful. Now what about this selects sensor element, director? Well, selection is my favorite because I use it in my official website, Rodigari dot com. It means that if somebody tried to select anything from your website, then which background and which font color you want? In this case, you see this bite for this light ish blue on the black color font. But what happens if you have a different team color, for example? Let him well, you can make this selection to be that on the font color to be right. So for that, let me just go here, Enemy. That's first in this one. Because I want this to look good. So first letter, let's make it a three ram on. Let me get to drop it. I don't need it. And if I go here, you see that we have this super drop cap. Now, let's go ahead and just at that selection. So I just used this regulation operator and election. And then what I can do, I can say background and let's make it red. And then color is going to by default black. But I need it, right, So right. And if I save, it may go here. You see that? Now my selection is actually going to receive these color you see in the background is red and the color is white. So this is insanely insanely powerful. And I used it because our drop gap is red and is a This is incredibly powerful. So Yep. This is how we can use this fast Later. First line and selection. Super element. Selectors 31. Using Selectors with Javascript: So this will be I'm gonna show that. How can you use thesis? Is selectors with JavaScript? So by now you have learned all overseas the selectors. And now you're ready to write your own optimized and efficiencies the selectors. But do you know that you can use all these selectors with JavaScript to add dynamic behaviour on your estimate document? Well, if you do are gonna go full stack development. But even front end development, then you often leave gonna use thesis electors with Ciara escaped. So that's why I wanted to give you interruption in this movie that how we can use the selector switch our escaped And if you want to be no javascript then this video will betrayed for you. But if you haven't walked before the withdrawal escape well, in that case, I will come in to stick with this video because you're really gonna enjoy it. So here you see that I have this heading to that. Then we have this paragraph. We have this a section and we had we have this six links in another section on this heading and then another list off my favorite TV shows and at the very bottom. Just skip the source, which is Abdullah Tia's. We're gonna light JavaScript court and here's a webpage. So now you know that if you want to add certain is tight to this paragraph, for example, if you change the color of the Pentagon out, you target the speed and then you can easily say hair color on Let's make it right. And if I go here, you see that love indeed this back after learning to read. Well, that's pretty neat, because this is what exactly we did in CS is. But how you do the same thing in Jascha. Well, I want you to remember only to just give two functions because these two functions were going to do all you select ings in task it. So the very first function is document dot query selector, and then the 2nd 1 is going to be documented. Chorus Lecter oil. So this is the only to function you ever need to select anything in US table. Damn. So let me just go ahead and quickly coming them out. And now let's start with selecting this paragraph. Well, it's pretty easy. We can use this document query selector because this is the only one paragraph we can use them. So here we need to pass off a selector. In this case, we're gonna use this element selector means this paragraph Balaguer and will select this paragraph. If you understand, it has to catch to the fielder, select another list. Rudderless. Right. So here the target is pecker, and then you won't do at this time. So it's one of his style, and then property is gonna be color, and then in double court or single court, you just past the value. And if I go here, you see it. Now it's turning to read. Let me just actually go here and let me just get it off it or let's make it great. So here we go and figure here. You see that? Now it's starting to green. So see, this is how you select things in task. But if you want to make it more readable, task, of course. Well, you can just cut it off. You can say this a paradox, Tyler color. And then you can just add this variable. Let Para if I go here, even see the exact same pink because I have told our selection in this para variable and that I'm using this variable to style our selections Here I continue knitting, for example. Is that say that's too well you see that are heading toe is going to receive that green color If you're juicier. Ally, which is list and you see that only first least got selected. That's because this particles director walked with only single element. So how are you gonna walk with multiple element? Where for that You can use this quest sector all Yes, you can just go ahead quest like royal. But now this is not going to work. Let me show you. It's not working. The reason is because the selector is going to select the collection off items. So for that, we need to look through every single collection. Let me show you what I mean. So if you know Javascript, then you know the collection, right? But if you don't know the asking, then you find this concept at once. So you find just go here. You see that UN console and here's the other. Actually, that's because this one, if I go here again, you see that you find the collections in this case we have a FIFA list, so we need to look through each of them. So for that we can go here. So in Oracle looked through this area collection, you need to use a matter and that's named is very. And you can say away from which collection or a rate will in this case because this is a collection off list, and then you can simplicity for each to list in this collection. We gonna do something, we're gonna store every single element in this ally because this is a list, and then we can use this function. And inside here we can easily use this ally so ally dot style and then color and which color you want. Well, this time, let's make it blue. And if I go here, you see that now are every single list here is turning to blue. This is incredibly powerful because we're looping toe every single list and we hairstyling that every list separately. But this is not on what happened. If you want to style this one and this one and this one too. But it's very easy now. You can go and you can add this karma right here and at the speed paragraph and diarrhea. You see, this paragraph is also tawn even, uh, it's too well, go ahead and hit the edge to and I see that now Edge to is got this color If you on that links well, I can go here. Agassi e that link. This is electro right. And you see that everything. The link is also turned into this blue color. You see, they're very powerful. Even a change this to be, Let's say pink. You see that everyone is going to Tony to pray. If I select something like a read, every one of them is going to turn into red. You see, this is incredibly powerful. And you see that I'm using here these elements actors. But it can mix the selector type. For example in his class. Like to ride a selector. I'm sure you feel Yep. You see this? This paragraph have a class. Electorate is text where we can go here. We can get rid of this paragraph, which is element selector. And that's area text, which is a class act, Francie. Still, they're receiving this same thing so you can mix the selector even he could use attributes selector, for example, that in h r f there's a O which is a Facebook and this is Google. And this book is going to get selected, really feel dislike them. Then you can use sub string attributes selector. Well, we can easily do that here we can get rid of every single thing and here we attack it all the links were hlf and then it's a master. Oh, but this would be sub string. So I'm gonna use this star selector, right? And I was gonna happen. Is that it going to select every single link at ritually continue with or so Google Facebook and book is going to be selected. So now if I say with a great to see that now, indeed this Google Facebook and says he's got selected, But let me just do something really fun. I'm gonna go right inside this and here, and I'll just add, like, break. So we need some space between this links and pretends right, So I don't see her button on click attribute, and I'm not gonna pass anything for now. And here is also gonna be that on click. But this time is gonna be like. So now you see that I have two buttons right here. The blue and the line, which obviously look horrible. But that's all the KCIA I need to go, right, abductees, and let me do something. What about? We're gonna create our function right into this function. Let's make it change. You never see a color. And now here we gonna grab everything from here and vegan at best. It right? Let me just get rid of it. Because we did not need thes partier, right? And let me just get it off it and are here. You see that? We indeed selecting this spot here, it means that only these three we're going to take a fact. So let's say I don't want to definitely change its color, Sana, say a color. And then this is going to be the color the same variable and let's make it small. And now I can grab this function. I can go here, and I can pace dysfunction right here, inside and here. We need to pass the color name. In this case, it's gonna be like so I'm a saline, and now I'm gonna grab it from here. and I'm not pasted inside this one and this is going to be blue. So look, if I go here, that is a different color. And when I click on the blue line only this Google Facebook and Sis's book we're going to change accordingly. For example, the clicker blow you see the tree become blue. If I click on line the critical line see Blue line C So this is dynamic stuff. And if you want to change the color of every single thing on this document, well, you can go here and again. You can just select everything. For example, I would just like paragraph that list, then Etch two and then a link in Africa. Here you see that everyone had the same color perfectly can blow everything is going to trying to blow. If I click on this line, everything is going to turn into life. So this is how you can use the selectors. We escaped to add dynamic behaviour on your estimate document. When I only scratched the surface, you can do a time thing, right? But I wanted to make this video to give you just interruption that how can you use these selectors really tell escaped and what's possible 32. Last Thought: So now that we have learned everything about sister selectors like a basic sectors Combinator available selectors Trudeau, element selectors and so do class electors. Now you're ready to use it in your on the whole project. I appreciate you have taken time to watch this class and I hope you have enjoyed loving sister selector the complete Guide class.