Mastering CSS & CSS3 Selectors | Kalob Taulien | Skillshare

Mastering CSS & CSS3 Selectors

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (1h 43m)
    • 1. Introduction To CSS

      2:08
    • 2. Syntax Reminder

      3:12
    • 3. Grouping Selectors

      5:43
    • 4. Descendant Selectors and Specificity

      7:51
    • 5. Child Selectors

      4:33
    • 6. Adjacent Selectors

      3:44
    • 7. Advanced Selectors: Attributes

      4:48
    • 8. Advanced Selectors: Exact Value

      3:59
    • 9. Advanced Selectors: Contains Value

      4:14
    • 10. Advanced Selectors: Starts With

      4:24
    • 11. Advanced Selectors: Ends With

      3:48
    • 12. Pseudo Selectors: Hover

      5:55
    • 13. Pseudo Selectors: First Child

      4:44
    • 14. Pseudo Selectors: Last Child

      3:34
    • 15. Pseudo Selectors: Focus

      3:57
    • 16. Pseudo Selectors: Checked

      6:11
    • 17. Pseudo Selector: Disabled

      3:26
    • 18. Pseudo Selector: Enabled

      1:57
    • 19. Pseudo Selectors: Not

      7:57
    • 20. Pseudo Selectors: Before

      8:04
    • 21. Pseudo Selectors: After

      9:04

About This Class

Learn how to master CSS & CSS3 selectors. Target almost any element on your page. Learn how to style entire websites without writing any JavaScript or HTML! 

48f8341b

Transcripts

1. Introduction To CSS: Hello. Welcome to CSS. In this lesson, we're gonna talk about what CSS actually is. If you are completely new to CSS, this is a great introductory lesson. When you look at a website, you don't just see tax tear where just as welcome. You don't see just raw HTML either you don't see David says Hello, my name. My name is Caleb. You don't see any of that stuff. All you see is the text on here, and that's from that ugly. Nobody wants to look at a Web page that looks like that anymore. So CSS, which stands for cascading style sheets. Basically, what's a style? These so that it's not just black text on a white background. And now you can add colors, borders, images, background, images, you know, all sorts of beauty. And so a good example of this would be the website Reddit. So read it. While not a beautiful website by any means does employ some CSS. So we have, you know, links When you click a link. What happens? Ah, when you hover over a link, what happens when you go over one of thes? What happens is this tax little bit different from this, right? So now we hav e mean even over here when we move our mouths over, that's not just HTML. That's CSS at play. And so CSS really lets us creates all sorts of styles for multiple Web pages all at once, and we don't have to write it on the same page over and over and over again on like, HTML. Where we have to write same HTML on the same page is over and over and over. CSS allows us to do it in just one file or in line or just in one particular file or really anywhere. It's completely flexible that way. And so when you go to Facebook or Google or really any other website that isn't just plain boring text like this, then they are using CSS, and that is almost every website these days. That's probably 99.999% of all websites, so that is a quick introduction into what CSS is and how it's used. We are going to get into it, obviously a lot more. We're going to create a lot of different styles. Now we're going to learn everything that has to do with CSS 2. Syntax Reminder: all right. Before we get started, we need to see what some of the CSS syntax actually looks like. When were writing CSS in line or inside of a website? Ah, webpage. Rather, we call that internal CSS, and it looks like this retyped style. And then we have what are called. I'm doing air quotes here, selectors. And then So we have, like, h one color blue. And I'm gonna change this to an H one. Say that and refresh. And so now we can see whenever I make it dip. And when I make a change here, it changes the styling so it changes the actual look of the page. And so this is pretty much the smallest thing you can change on a page using CSS. It's just the color, but a selector is this So selects the H one tag anything between the opening and closing curly brackets, which can also actually go on multiple lines. I actually prefer them on multiple lines for the most part, So anything that runs between here is going to take effect on any of the H ones on the page . Now, I have a property here, and I've got a value. So these air it's called a pair of property value pair. And so I changed the property of color to read, and all I did was right color colon and then red and semicolon to tell the browser that this is the end of the current declaration and a declaration is just this line. So we've got the entire selector read a declaration. We have a property and we have a value. Now if we want to, we can add multiples so it doesn't just have to be one at a time. We can also right font size and the change of font size is something huge. Let's say 80 pixels and we're going to get into pixels, font sizes and all this stuff down the road. Refresh the page and look at that. It's huge. And so now we have two declarations. We've got lined seven in line eight. We have our selector here online six, and we just have a closing bracket, which basically wraps all this into a one rule. Now, if you want to add another selector, we could do that as well. Just right, def. And let's go Border one pixel solid blue and all I'm doing here is wrapping the word welcome in a diff save that refresh. And I've got a blue border up there. So just like that, CSS can be applied now. This is only going to affect anything that's inside of this index dot html page. And technically, that's that's no use, really, because you're gonna have more than one html page. You might have 100. You might end up having 1000. You might write a CMS that has tens of thousands of pages or, like Facebook, literally billions and billions of pages, and you can't changes on every single page. So what do we do then? We move that into an external style sheet. We'll cover that in a later lesson. 3. Grouping Selectors: all right. Suppose you have multiple elements or multiple classes or a class an idea or some sort of mix match pair of elements or selectors that you want to style? All the same, up until this point, we have been writing the same code over and over again. We've been writing something like active colors, equal to read. P color is equal to read. This is already starting to get quite redundant. Or if we said something along lines of H one color is equal to read. Why are we writing Color Red three times when we can? Right color red just once and we do this by crew Ping our selectors together, and we're going to go through an actual example of how we can do that. So let's create a div, and this is called This first element put the Texan recalled for settlement span the second element, and let's put another one in there. Put paragraph third element. So we're not working with anything fantastic here. But what if we wanted to change the font size of all of these? We would say div and that we use a comma span comma P, and so this just like when we were creating a font family. It's just a comma separated list, and all we do here is specified color red. And look at that. The color is red Now there's something to be a little bit aware of, actually, quite a bit aware of is First of all, our selector is very broad. It's looking every development, every span element, every paragraph element. Now why did it cause three title of this page to turn red? Well, that's because the title of this page is actually an H one has nothing to do with this, but its parent element is a def, and we selected that by writing def. Now if we only wanted to change certain elements with a certain class. So let's call this certain class and I'm gonna copy this over. Hold on, Let's Ah, let's clean this up. Let's put this on a few different lines here, all right, Those air on different lines now, and that's just threw that in there, and actually, that's incorrect. There really should be a dashing on equal sign so we can target just thes. We know how to do that with one selector and with just one selector. Weaken right and there we go, So that works. But that's not actually grouping anything together. But what if we wanted to select all of those and also any spans? Now again, we're grouping these together, so all three of these are going to be read just like that. So now we know what to expect. So whenever you need to write any sort of CSS declaration when you have to write it more than once, it's a good idea to group together now there's little caveat with that is you don't want a group them together too often, and what I mean by that is, if you have one element and the padding is five pixels, but it also has a bunch of other declarations a bunch of other styling attached to it, and you have another one that's the same and over and over and over again. Okay, well, that's great. You see that? They all have padding in common, but grouping them together. Is that really a good idea? Because if you make one change but for example, if we change the color, this toe blue is going to change all the text of blue, and we don't necessarily want to do that. So sometimes keeping your selectors ungh, grouped or separated is actually good idea because you don't actually want them to have any simultaneous effect across multiple selectors. So instead, what you can do is you can actually write it the long way. Or, if you know that, let's say element one, an element to are always going to have the exact same type of padding, then weaken. Group it together. If we know that it's always going to have the exact same color type, then weaken group it together. Otherwise, if we're unsure that these two elements element one an element to can have the exact same styling don't group them together. All right, so your task for this lesson is I want you to write three different elements with three different classes and group them together. So what this should look like is certain class one certain class to, and this one should say something along the lines off certain class three stereo. If I could only type and then I want you to create some sort of selector that grabs all of them so you'd want certain Class one two and three color is equal to read. So just like that. So I want you to basically recreate exactly what I just did there. But I want you to get your hands on experience with it. I know some of these tasks could be a little bit boring. They're not fantastic. They're not Gloria's. We're not making the most beautiful website in the world yet, and that's fine. You have to get used to writing some of these things the way they are. You have to learn your tool set before you can actually start to write some great beautiful websites. So go ahead, create a group selector and change the color of whatever it is toe. I know red or blue, maybe out of borders. All of them change the font size. All of them just play around exploring. Bi curious 4. Descendant Selectors and Specificity: suppose you have a certain hierarchy, your document object model, and you really only want to select certain elements inside of certain elements. Now, this sounds quite fag, but this is actually a super common thing in front end web development. So quite often we're going to have a div and while the paragraph in it and they will have a span in it and something here, So that's actually right. Active text here, paragraph text here and changes to spend text here so you can see that we have a bunch of text on on the page. How do we go ahead and specify justice one span? What if we have other spans? We have a span here. Good. Another span. And I say we have a span here, another span here and change only me. So refresh the page and this is what we have now pay no attention to the basically the ugliness of the layout. Right now, what we're talking about is a descendant selector. Now a descendant selector means we can select this def or any other div or really any other element. And there we can select its child element, and it's child's child elements. It's grand. It's grandchild elements and so on. So as an example, that's right body. Because where did I get that from I d body? So only select the stuff in the body, don't select anything side of the knave, then select the Div. And I do that by just reading a space. And then I want to select the paragraph. And what happens when I do this? Let's just change the color here. Look at that. Just the paragraph is changed. Now what happens if I had another paragraph in your? Because up until this point, we've had basically selectors that just select entire elements or a certain class or a certain i d. But what happens if we have more than one selector? We're one element that's currently being selected, and we only want to choose just one of them again. I know that sounds quite vague, but here's an example. Another paragraph. So here we have a P take. This is our selector. We said all the color should be read. Well, if we look in our HTML, we know that we have one here and we have one here. But only one of them has turned red. Now we're talking about some specificity and specificity is super powerful and a positive and a negative way. Another reason that it's great, because we can really drill down into our code. We know that we could select body the div and then all paragraphs inside of this def. So if we wrote another paragraph here, guess what? This one's going to be read just like that. And it doesn't matter if they're in a row either. We could say another Devyn here called us a spacer, and this one is still red. Now, why is that again? We selected the Actually, let's just write this out. We have divi d is body, then we've got a diff and then we've got a P And so this paragraph is what we're selecting . These are the same. This is exactly what it is selecting now what happens if we only want to just like the spans inside of it? Well, we just add a space and select the spans. Now we do that by writing well, p space spent and now only the span has changed. And again, the span that's outside has not changed at all. And so Now we're getting into specificity yet again. How? How can we specify this even further? Well, we could say class span and let's assume that all spans have a class name of span. If I refresh, nothing's gonna change. But if I said span dot it's Ben because I know that this is the class name because it has the dot This is the element cause has nothing in front of it. And this is an I d. Because it has a number sign in front of it. I save and refresh the page and only the one is selected as red. So now we're talking about again more specificity. So how do I overwrite this? If someone has written something like this, how do I over it that well, what happens if I just type spanned out spen and color is blue and I want to do is change This red font is read text into blue. Well, it affected the other span great, but it didn't expect it didn't affect this one. And the reason for that is because again, specificity is great in a positive and negative way. We need to actually copy this over, and if we look in our deaf tools. So we have this span here and it actually shows us the exact selector that we wrote in our style dot CSS file. In fact, we can even click it and goes right to exactly where that selector is. And so we see here if we scroll down a little bit that the blue color is not being used. And that's because we need to copy this entire selector or in other words, and you will run into this problem. A lot of specificity is a huge problem in CSS. So what we do here is we change the selector to match the one above it just like this. And now the text is blue. It says the text isn't blue, but it is actually blew. This just didn't update properly. Or if I refresh the page and I go back here and I copied us over So now these are the exact same saving refresh look that are Texas Turn blue again. So that is a specificity problem. You can't overwrite anything that is specifically written. So even though that spanned out span is at the bottom, it is below the body. Div piece Band Out Span. The problem is, these are all getting in the way, and so it's becoming very, very specific in the more specific you get, the more specific specific you have to be in the future in order to overwrite that. So a solution to that is just keep everything as flat as possible. So if we just had spanned outs band, that's fine. There's not a lot of specificity there. What if we just wrote dot span color Tried to change it to read, not read. I met Blue. Okay, well, look at that. This one is still red. This one's red to now. Why is that again? Specificity. You have to select the exact same way as Thea other selectors that you're working with. And when I refresh the page Boom, There it is. It's all blue. So that is specificity and grouping selectors together. It's sort of Ah, two and one lesson. What I would like you to dio is I just want you to write a bunch of elements. Ah, and nest them inside of each other. So you've got Div and then you've got a paragraph and you've got a span inside of it. And then you find a devote side of it. And you know something along these lines. Just make a big old mess of your HTML, and then I want you to select the one that's deepest in there. So for me, the one that's deepest is so I've got ah div idea of body div P span. That one is the farthest one in there. And I want you to just select that one and change that color just like we did at the very beginning of this video. 5. Child Selectors: All right, let's talk about child selectors. A child selector is no essentially going to give myself some space. Don't work here. It's essentially just an element. And inside of that element you have your child elements. So you've got, you know, a paragraph, paragraph one to and let's just copy that for 1/3 time. Nothing fantastic, right? But another way we can target that is DIV. P and then say Color red. So back tracking What I did here was I used the greater than sign, which means it's a child of, So it's not going to slack any P elements it's not going to select actually start just like any pl limits unless its parent element is a def. But what happens if I wrap this in another def? So now my selector would look like Div div P Okay. It still works because Div is a parent of P. What happens if I change us to I don't know. Let's call This header doesn't work because the parent element for these paragraphs is not a diff. I mean, it's grand Parent is sure, but its immediate parent is a header, and so that is the difference between just a regular descendant selector where you can select Div and P or Div header p like that versus diff P. Now, why would you ever use us? That's a good question there. A lot of times when you want to use this, for example, in rich text fields from like an editor, you're gonna have everything basically wrapped in a paragraph. And when things wrapped in paragraphs against a little bit tricky to style things that you catchers go into the editor and change how everything is style, you're gonna actually have to style it using CSS not HTML. So, as an example, we would have something like this. We have a span. This is blue. So we've got paragraph one with a span we've got paragraph to in paragraph three If we just did P span colors Eagle to blue. This will change the span to a blue color. Great. What if we did give peace? But now we're getting super specific. Now we're saying only ever style spans at her that have a grand parent element of div that have an immediate parent of a paragraph and the child itself is actually the span element now I'm gonna actually go on do that because I want to create one more example for you. So now everything is blue. But I said, If I said all paragraphs have to be read Well, look at that. My paragraphs air still blue and again specificity. But if I take one of these paragraphs out paragraph three outside of the diff and so that's outside of this selector, it's still blue. Why is that? Well, it's because we have a div appear. So if I got rid of body, there we go. So now that works. The blue Texas only ever being targeted again if it has a parent element of Div and the selected element is a paragraph. So I mean, I feel like I've sort of beat this idea to death so far, but it's incredibly important to know, Um, and there are also a lot more efficient. If you're gonna talk about really any sort of CSS efficiency, it's a lot more efficient than just writing Def Space P. Because of Def Space, B is going to look for every P element, whereas Div, greater than P, is only going to look for P elements that have a diff parent. So this is going to look for all dips and all peas, and this one's going to look for just paragraphs inside of a def. So that's the difference if we're talking about efficiency now, what I would like you to do for this lesson has your task. I would like you to read a parent element and then right child elements. Read a couple of them inside and then write a couple more in here. And then I want you to just select the ones that are inside of this that are wrapped with a div or a certain I D or a certain class. 6. Adjacent Selectors: all right, let's look at at Jason selectors and adjacent selector is when you select, for example, a label element, and then you select the immediate element after it doesn't have to be a label you could be selecting, for example, a paragraph. And then you could be selecting the immediate paragraph after that. And that's exactly what we're going to do. And we're going to do this with just CSS. There's no HTML involved. We're just looking at the styles now, so let's take a look at her code. We have form and let's again leave yourself some space here, so we have formas apparent element. We have label as one of the Children and input as another child. So let's select form. And unless select label and in order to select the element after label, we add the plus sign. So it's label plus and then input, and then we can change our styling here. So, just like that, you can see we selected everything inside the form. We selected the label, and then we looked at what was after the label. Now what happens if we add a second input? Only one of them has ever styled And that's because it's only ever going to select your label, plus your input. It has to be both together. If the's are not together, your selector does not work. Let's go ahead and make this, you know, a little bit nicer. Look at border one pixel solid and C C C. Background color. Uh, you know, let's make it transparent because we can do that, too. And they're real. We've got a little input field, and that's all that and adjacent selector is. So it selects the label. And then we told it to select the input right after it. Now what happens if there is no input right after it? Let's say there is a paragraph with helpful text. Nothing is selected, and that's because what comes right after the label paragraph not input, which is what we were looking for. We're looking for the label and then input. And also just on that note, we can also get rid of that form. I'm gonna go back and remove that paragraph and refresh my page, and it still works. So the only reason that I had it form in there was disliked the form itself. And if we are rid of three plus input. Now we're just liking the form and the label, and if we do just a child, it'll be the exact same. So now you can see how we're starting to select different things without actually writing any HTML in order to select it. Now. The reason we want to do this is because sometimes depending on a framework you're using, like, for example, Django, if you come from a python background, does not let you easily modify your inputs, so we'll have a certain class name, most likely. But if it doesn't, if it's just a plain form like this, there's no classes. There's no ideas, nothing like that. You need to be able to select these without going in and actually modifying that package or modifying the way that the background code works. You just want to be able to style it, and that's all we've done here is we've given you now a way for you to style something very , very easily without reading any HTML or python or or JavaScript or PHP or anything like that. It's just Pierre CSS. So what I would like for you to do as your task in this lesson. I want you to write a form, a label and an input. And then I want you to select that input using an adjacent selector and then just style it at a border at a background color. Feel free to add some text or something in there to change the text color. But essentially, I just want you to copy exactly what I have done. But I want you to write it out the long way like you saw me dio. 7. Advanced Selectors: Attributes: All right, let's look at how we can select elements by their attributes. Now, the most common way that I can possibly think of is in a form, and you would not believe how often I end up actually using this almost every single day. And just because you don't use something every single day doesn't mean it's not important. But I would say on average, five day work week, I would use this two or three days every week. I use this all the time, and you're going to use this all the time as well. Now, before we get started, what I want to do is just style this form of it. I'm going to give it a quick little border. I'm gonna give it a little bit of padding in here. Let's add some 20 pixel padding and let's change the labels so that they are block elements 100% with, and that should put everything except the submit button on its own line. There we go, and let's put button on its own line as well. In fact, we don't even need to do that. We can group this together, get rid of that's refresher page. Cool. Actually, that sort of looks terrible. I don't like the button. Having that kind of with That's gonna be very distracting. Plus, I want a margin on the top and let's make that not 40. Who? Margin 20. Something like that. In fact, this can actually go up there. No, I lied. Let's undo that. Looks bad. That's part of the fun of Ah, yes. Being front end developers, you get to experiment with how things actually look, So I'm gonna change that margin top, and, uh, I do actually want one. Wants a margin top. Just not very much. Five. Might not be enough Tension. Probably be plenty cool. There we go. That's as much as I'm gonna dio. So let's move this down. Make some space to work. And how do we actually select an element by its attributes? Well, it's actually really, really easy. So we know that we wanted to select all the inputs we were type input and watch this Sollett red. And our inputs have Redfield's. But if we look back at the h e mail, there's two types of inputs. Type is equal to text and type is equal to email. now another way to select is by the attributes, and we can select this. We can actually group this together or not group us together. But you join this together, Can can eat it. So we're going to select all inputs that have a type in it. Refresh the page. Nothing happens. But if I remove email here, so we have we just have to input labels. One that's type and one, that is we don't even know it. It doesn't have a type yet. The browser says OK, we're gonna put that into a text field, just regular old, boring one line text field. But CSS says Okay, well, it doesn't actually have the type attribute, so don't select that one. And that's exactly what this is. You were selecting the type attribute. Now we don't actually need the element in there, either. Weaken selected purely by its type, and you can see how this selects everything with the attribute type, including the button, which has the type is, well, it's tight is submit. Now. I'm just going to undo that on Oops, that's the wrong one. Type is equal to email. I want to put that back. It's gonna give me a nice right border on by nice. I mean, e And let's change that to something that doesn't look dreadful. One pixel solid that we go. Okay, so now we know that everything with a type is going to be bordered with a one pixel solid C , C C. Border. And in fact, we can actually give it awesome padding as well. There we go. So it's not as tiny anymore. We have something to work with now. This is just one video in a series of selectors. So you should be starting at this one because this court is going to go into the next few lessons. It's what I would like you to do. Your task for this lesson is creative form. Add to labels at two inputs at a button. One of your inputs should have a text type, and the other one should be an email type. And I would like you to select input with the type attributes, so make sure they're together. I don't want you toe target the button elements just the input element. And I want you to start get this one and this one together, and then I want you to know. I don't know. Spice it up. Change the color change of border changes size, change the heights. Do something that is interesting. That is creative. Have some fun with that. Make it super ugly. If you want, it doesn't really matter. No one else has to see it at this point. And this will give you really good hands on experience with selecting using Justin attributes. Now, the next lesson, we're going to learn how to select a specific value in an attribute. 8. Advanced Selectors: Exact Value: in the last last night, we learned how to select by attributes. Instead of just looking by a class or an I D or an element or some variation off, we learned how to select by an attributes, and so I just opened my style dot CSS. Here, Mrs. Scroll down so we can see what's going on. And in this lesson, we're going to learn how to select a particulate. Her attributes, one that has a certain value. Now, looking at her form, we have three different types we have. Type is equal to text. Type is equal to email type is equal toe submit. We can ignore the labels because we don't need to select by those anymore. We construct just by the attributes, although just a little for your information. Little fun. Fact here is, if you want efficient and fast CSS and believe me, writing very, very bad. CSS can actually slow down your browser, especially if one of one of your users part of your target audience, is on a really old browser. Eso maybe just keep that in mind, but for now that's not a big deal, so you don't have to select by element anymore. You can select by the type you select by before you construct by action. And as an example, let's select just the type is equal to text, and in order to to do that, it's actually insanely easy. We type the word type because that matches the attributes and what is the type that we want to target text. Open our brackets like we normally do and border two pixels, two pixels solid red, just so we can see exactly what is targeting. And when I refresh the page, would you look at that? Only one is selected. This one selects both, but this one only selects one. Now. If we want to change that, we could say Type email like that or if we want to change the type again, we don't have to select text or email. We could select really any other option out there and let's try button. Actually, that's not Button. It's submit because it's a submit. Submit button And there we go. We have another border on top of the submit button. Shouldn't say another border. It actually overwrites the existing one. And so that's how you selected now. Is that useful in a lot of cases, Yes. What if you wanted to select the four Four is equal to and has nothing in there. Look at that. We're now selecting for what does that mean? We're selecting this entire element in this entire element based purely on his attributes and the fact that it has nothing in it or if we wanted to select the entire form instead of writing form like we have before we What we can write instead is action, and this sort of leads back into the previous lesson, and that's fine. But if there was a certain action, let's say every form that signed in a user, so it was like slash logging is where the form get submitted to. Then it's only going to style that one. Now we have specific style rules, and if I changes to slash log in and just refresh, we see that it matches Now. I'm actually going to undo that because that's unnecessary and it's actually going to go anywhere. All right, I'm just gonna quickly do this so that you guys have the actual code to work with here, change out, went to email and is going to select the middle one. There we go. Just like that. Now your task for this lesson is, if you don't already have it, create a form like this pretty much just duplicated. Whether you can download it or write it by hand, it doesn't take very long to write this. Grab that form and in your style dot CSS. I want you to target just one particular input field. So either target the text field the email field, or you can even target the the button itself because it also has a type attributes. Then when you've done that, I want you to target the four attributes. I usually just use a red border because it's big, it's ugly, it's in my face and you can see exactly what you're working with. But if you want to try to make it more beautiful right away, by all means go for it. 9. Advanced Selectors: Contains Value: leaving off from our last lesson, we learned how we could select by an attributes and by the attributes value in this lesson . We're going to learn how to select something, select an element by a value that it might possibly have inside of it somewhere. So it doesn't have to be the exact value, but it does have to be inside of it. And a really good example of this would be if we typed FAA FAA dot ah, question circle. I hope this is one, um, that should actually be an I. And this is a front. Awesome Icahn. There we go. Look at that. So we've got this nice little icon year doesn't say or do anything and let's give it a title. We don't sell your email, you can trust us something like that. And so a title is, you know, it's put my mouse over it and you can actually see where it says we don't sell your email. You can trust us, So that's pretty basic. Now in CSS, we can actually select this by not only it's element or one of its classes. There's two to select here or by the title attribute we can actually selected by one of the words in here. So if we go to our style that CSS and type, let's get let's get fancy with this FAA dot FAA question circle and we want to select the title attribute. And if it has something in there, you use this little icon there. Everyone has a different name for it. Just so just out of simplicity, I'm going to call it the squiggle one of these squiggle character call whatever you like, really. I've heard a dozen different names for it, and we're seeing a type trust, and that's at a border a red border so we can see that as well. It's now we're selecting every element that has the Class F A and also has the same. And in that same element, Rather has the Class F A question circle. It also has a title, and in that title is the word trust. I refresh my page, and there you can see that we selected that very, very specifically. Now we're getting into the nitty gritty of CSS electors. Now to prove that that actually works, I'm going to remove the word trust and I'm going to say, Um, just removed. That's fine. There's no border around it anymore. What if I did all uppercase? Well, you can see that this is actually case sensitive. So I type the word trust with the capital T. It's not gonna work. I move this down to a lower case, refresh the page again, and it works. So it's case sensitive. Now your task for this lesson is First of all, I want you to use a font. Awesome icon. You can get it by going to max cdn dot bootstrap cdn dot com slash fund awesome slash 4.7 point zero or whatever version you're on or just by going into the old google dot com and typing bootstrap, bootstrap Cdn font, awesome CD and something rather this is gonna be in one of the top results and just grab that and that allows you to use these beautiful little classes, which gives me that little icon there. So I want you to first fully use found awesome, and then I want you to give this title and target a select, use a selector and target this element by whatever's inside the title. And just as a heads up. It doesn't have to be the title attribute. It can literally be anything else. In fact, let's do this. Anything else, we'll change that from title to anything else. Refresh my page and guess what? It still works. CSS doesn't care if he attribute is a real attribute or not. It just cares if it exists, and if it does exist, we can select it that way. So go ahead, create your super specific, somewhat complex selector and give it a border so you can see what's what's going on. If you're actually slicking the right one or not the right one. If you don't see that border, you're not selecting the right one. Just make sure you add that border in there, and once you're done, that move on over to the next lesson. 10. Advanced Selectors: Starts With: and this US, and we're going to learn how to select an element by it's attributes, and only if that attributes starts with certain letters. Now I'm going to admit that this one is not used as often as I actually would like it to be used. But it is still really, really important to know. And it's really good to know primarily just because you should know the power of CSS and what it can actually do for you. So as an example, let's type after the submit button. Let's put something along the lines of register. We're gonna create a link and just going to go to https some website dot com slash register . Now we're actually gonna get rid of that some website dot com because we don't need it. We're just going to assume that slash register is actually a U R l on our website. Let's even just put dot html and register. And let's also create one more in here and ah, perks, no less. I call it perks. That sort of vague benefits and benefits stop Pdf. So we're gonna creates two links here. We're gonna set ourselves up for this video and the next video and this one. We're just going to target register, and we're going to do that by selecting just this now. To do that, we go over to our style dot CSS and we could get super specific weekend type A h r e f yada , yada, yada. Or we could just be very bag Go h R E f. And to state that something starts with. And this is a rule in regular expressions, which is something you're going to learn in programming in JavaScript, PHP, python. All that good stuff. Regular expressions. The If something starts with doing air quotes here. If something starts with you, use the character Caray or whatever you want to call it that little upside down v looking icon. Now for this, we're just going to put slash register and let's change the color too black. Let's remove the text decoration and let's do display in line block so we can have some padding padding five pixels, whips, five picks, those five pixels, five pixels, zero on the left, and let's do margin right, 15 pixels. So it's a little bit away from this link here, refresh and, oh, would you look at that. This has been selected. Know what happens if we remove that slash? Remember, it has to match. Exactly. So when I refresh, we actually lose this. This styling and when I add that slash, it comes back now. The reason for that is because this is slash register and this is slash register. If I typed in a website, website dot com slash register, it's not going toe work, and again it's because it doesn't start with slash register now. Alternatively, you can also select a website whether it's http or https and you could do something like this. So if the website starts with https, you know that it's secure and you could put a little check mark beside it. Or you could make a green or, you know, you have let your users know that this is in fact, a secure you earl and watch this. There you go. In fact, let's even do that. Color is equal to green, just so you know. And now we haven't selected any other links because there are no other ones. But if the benefits that pdf one started with https, it would also be selected. Now your task for this video is to create two links, create a register link. I doesn't really matter where the link actually goes. It could go literally to any website or any page, even one that doesn't exist. But I want you to select it, using the attributes elector and the Starts with selector. And if it starts with https or like in our example of it starts with slash, register or slash reg or something, then make a different kind of style. Give it a different kind of style, rather, and just make sure that it works. So just like that, that's all you need to do in the next lesson. We're going to learn how to select and attributes that ends with a certain value, and we're going to do that by selecting just pdf. 11. Advanced Selectors: Ends With: in the last lesson, we learned how to select an element by its attribute. If it starts with a certain value and this lesson, we're going to learn how to select an element based on its attributes. And if that attribute ends in a certain value and we're going to use dot pdf as the example , so this is already in your foam. The prior lesson. If you haven't watched the prior lesson on how to select the first part of an attribute, go ahead and watch that video first. Then come back to this one and Mike might make a little bit more sense. I'm not going toe. Explain Red Jackson things like that in this video in this lesson. All right, let's go ahead and target the very end of a link, and we do that by using the dollar sign. So we go. H R E f dollar sign is equal to, and we typed out. Pdf and we do a border one pixel solid. Read. Watch this. This is going to turn red as expected. And that's because this link this h r e f attributes that we see here h ref ends in dot pdf now if it had to end in dot html. Well, that's a little bit different now. We have two selectors on this one, and that's because it matches The 1st 1 register starts with Slash Reg, and it also ends in dot html. Now we have two selectors on the same element that we don't actually want that we want this one to be a PdF. And what I want to do is change the color of it too green. Ah, the change, the text decoration. Let's remove that entirely display. Ah, you know what? Let's not do a display. In fact, let's float. Let's float that left and let's give it a margin of 10 pixels on the top, right, bottom and left. Remove that border and let's just see what happens here. Look at that. Benefits actually took the place of registered. We know that that was going to happen. That should not be unexpected right now because of float. Now, if we want to get rid of that, we just get rid of float, and instead let's do display in line block and let's add a padding five pixels all the way around. And let's add a margin of nothing. So actually, it's get rid of that one and refresher page and look at that. So we have a black link that just says register, and we're selecting it by the slash Reg. And we have the benefits link, which is green. There's no text decoration over it or anything like that. It has a five pixel padding. We can see that if we right click, go to inspect and check out our deaf tools. And let me just move that up here. The padding is five pixels all the way around, and that's being selected by DOT PdF. Now it doesn't have to be. PdF I just wanted to show you that dot pdf dot html work. It could literally be anything. In fact, let's do that Selected by the file extension dot anything and you don't need that dot in there either. In fact, let's actually get rid of that Dodge just to show you how efficient this works Go Remove that. And if everything works, this link is not going to change at all. I refresh the page. The link did not change at all. So that is how you select an element based on the attributes and the value inside of it that ends with a certain word or of value or really anything. Now, your task for this video is to select the benefits dot pdf link that we see in our HTML here. Ah, and actually, what you're going to see is because I'm gonna give you this code where it says dot pdf, I want you to be able to select that link based on a pdf, and I want you to style it differently. I give it a different color change font size, maybe make it a tallix, make it bold, do whatever you like with it. Just make sure that you were actually selecting it based on the ending value. And remember, use that dollar sign. 12. Pseudo Selectors: Hover: all right. The first lesson and our pseudo selector Siri's is hover and we've dealt with this one already. A couple times we've dealt with it with links. And if you went through the table section, we learned that you can hover over Rose and styles rose differently, including the cells. And this last, we're going to do something very, very similar. We're just creating a hover. But I'm gonna go into what the hover pseudo is a little bit more. And in order for you to do that, I'm actually going to create a demonstration here. Display in line block. Let's do a with of 300 pics those height of 300 pixels because that's a nice little square for us. That's change the background color. Uh, let's change it to blue. Let's make the border 10 pixels solid blue and see if that looks all right. Okay, so we got a square now. The thing about pseudo selectors is you can not write a pseudo selector in line. It has to either be internal or external CSS. So for this, what I'm going to dio is I'm going to write external CSS now. Just because we covered the section not that long ago on different types of selectors, we could select Ah, based on the attributes or the value of an attribute. I would like to sort of play around with that. And I just want to tell you right now that I'm just playing around This is not professional . When you're doing professional work, you always stick to the rules. But when you're just walking around, you can have as much fun as you like. And I'm going to give you a demonstration on that right now. So I'm gonna create an attribute called Website, and I was in a called Arkham on dot com and that's not a real attribute. Now, when I go to style dot CSS and I type in the attributes Elector website is equal to our common dot com Go here and I'm gonna paste all that in there and I just want to fix some of the in denting here. Now I save and I reload my page and you see that nothing changes. So you know that thesis electors actually working now for the hover selector toe work? All we do is we copy over this entire selector as it is, and we add colon hover, and I'm gonna move that down so you can see what's going on and let's zoom in. Colon hover is the hover state. Now. What is a hover state? Hover state is when you put your mouse over an element or when you focus into a field, or when the element has some sort of interaction and may not be visible. You may not see it, but your browser's triggering these things all the time. And so as an example, let's change the background color when we put our mouths over the blue block background color, Let's go black and let's actually change the border color as well border color to yellow and at refresh. And when I put my mouse over this, it's going to change the black and yellow just like that. Now, something cool that you should know is when I inspect There's this little ellipsis here, so I've got the element selected, and I can see this little ellipses. I'm just in Google chrome, and so you're deaf tools. This is your best friend as a front and develop earth. This is by far your best friend, so I click on this and I click on the Hover State and it is always in hover mode now so my mouth could move in and out over on top out of it. Do whatever it wants and do whatever it wants. And I could do whatever I want. And it's always in the hover saying, This is great for debugging. Now down here there's also a hover states a toggle button. You can click that as well, if you like. I'll let you experiment with that on your own. But again, you're deaf tools. Your best friend. OK, so I'm going to undo that by ta going off, and now it goes back to normal. Now your task for this lesson is to create a an element of some sort. It doesn't have to be a big blue blocks, a big blue box like what I have. It could be literally anything. It could be an input. It could be a now. It could be a footer. It could be a link. It doesn't really matter. I just want you to add the hover pseudo Oh, there's one thing after out to actually mention in order to select a hover pseudo or actually any pseudo you need to select using the colon and a museum in here again So you can actually really see that is used the colon. So we used periods like let's do this. So this is a class. This is an I. D. This is an attributes, and these are suit does. And so whenever you want to select the state oven element and change something about it, you always use that colon. All right, Back to the task. Yeah, just create some sort of hover state on some sort of elements. Have fun with it, Break its don't break it to make it beautiful. Make it ugly. It doesn't really matter. But when you put your most over your element, it should definitely change like this. And again, I just created this attribute called website. It doesn't actually exist. If you want to stick with something professional, you can do that. You could even just stick with a regular class and call it website And then over here we can select both of these and call that website as well. And you're gonna have the exact same effect. So I refresh my page. Same thing happens. So if you want to stay professional, stay professional. If you want to have some fun, have some fun. Nobody's going to see your work at this point. So I think you should just go and have some fun do. Here's with it. I see if it if something works, if something doesn't work and just, you know, be creative, you're allowed to be creative. All right, so that's your task. This was the lesson on pseudo selectors all about hover and I guess a little bit of an introduction about pseudo selectors in general and we will see you in the next video. 13. Pseudo Selectors: First Child: There's a pseudo selector called First Child and what that means is with any contained elements or even within your page, because your page is made up of elements, even the body. The body tag is an element, and even that is a child of the HTML element. There are Children and this is all this all part of the document object model the D o. M. Now, if you don't know what the document object model is, I suggest that you go in either google it or go back and reference what the document object model is in an HTML course. Because from here on out is going to be very, very important. Actually, it was very important about 40 lessons ago and you're going to use it a lot. Ah, lot, A lot, A lot in JavaScript. So I'm not here to harp on you about document object model. I'm just letting you know that there this is really starting to come into play and this is why so we have a diff and let's call this the parents Div and we have a child in here. Let's call this Ah, first child P, I'm gonna copy that and call this one the second child p or possibly second child P with the proper spelling. Third child P. And now I'm gonna refresh my page. And all we have is three paragraphs. Okay. What do you do, Caleb? I know now in style CSS we can use a pseudo selector called First Child in order to select just the 1st 1 within a boundary. So I can type p dot child. I'm just looking it by its class and I type colden first dash child again. Typing is not my friend While I'm recording apparently first dash child like we have here and all I want to do is change. Let's change the background color to not black blue. I mean, let's change it to black and let's change the color to white and refresh my page. And there we have it. The 1st 1 was elected. Now, if I remove the first child all paragraphs with the class of child or going to be paragraphs with black with a black background and white text and if I refresh, you're gonna see exactly that, and I'm gonna throw that back on first child. And as another example what I'm going to do is I'm gonna copy a copy. Two of these one down here. Ah, outside numbers two. And I call this one outside number one, in fact. Ah, that's not a child at all. Well, I mean, in a sensitive, So I'm gonna keep that. And let's take a look at this. Now again, The first child p is the only one that selected. Why? Because it's not just selecting paragraphs. It's not just like in the class of child, which now has five instances. It is liking the first in a set. So if I copy this down and remove that one, basically move it up there. So I've got outside one and two at the top. What do you think is gonna happen? Just take a second and think what's gonna happen? You know that it's selecting paragraphs was a class name of child and the first child of each one. And you know that this section is technically these air all Children is while their Children to the diff with the idea of body. So do you think outside number two is actually going to be highlighted on by highlight? I mean, black background white text? Or do you think number one is going to or neither and only this one's going to. What do you think? Look at that. I refresh my page, and the first child is the only one. Now what happens if I remove the class dot child? Nothing, because the same rule applies. All I did here was don't select every paragraph with a child class. Just select the paragraphs with the child class, and it just happens to be that that's all of these. I could just as easily you know what's actually Yeah, let's get rid of the 1st 1 here, and these are useless. And so this one no longer has the child class. So it's looking for a paragraph element with a child class, and it's going to be the first instance of it. So I refresh the page, and first child is still black because I did not say by page. Now I refresh and look at that, none of them. So that's your introduction to the first child pseudo selector. What I would like you to do is create a parent container, some sort of containing element throws 345 different paragraphs in there and just select the 1st 1 and changed its style. And once you've done that, we will move on to the next elector. 14. Pseudo Selectors: Last Child: suppose that you have a set of elements. You have a bunch of elements and you want to grab the very last one. That's not an uncommon thing to do. An uncommon thing toe want. So how do you do that? Well, you use the pseudo selector last child, and it looks a little bit like this. But before we actually write that, let's go ahead and create a demonstration area. So we have this. Call it demo area. Let's go. Ah, paragraph one to and three. And let's do, um, that's not use a paragraph for this one. Let's do span one to and three. And when I refresh the page, it doesn't look fantastic. It looks exactly like what you would expect now. Inner CSS. Make some room for us here. Let's type P last child, and that's our pseudo selector. His last dash child. Remember pseudo selectors always start with a colon, and let's change the background color. Two yellow and the font color should be, ah, something not too dark. Not to light, though. All right, I refresh the page and you see that absolutely nothing happens now. Why is that? We said select all paragraphs and then just get the last child in a selected group. Well, we have selected or paragraphs. Why is it not selecting Paragraph three? Well, the reason for that is because in its group in its list of siblings, it's brothers and sisters. Remember, this is your parents. So this is Mom or Dad. And if this one was you, this would be your brother, your sister, another brother, another sister, another brother. And so it's looking for the last child. And because those last Children are spends, it actually needs to look like this. So now would we go and refresh your page? What we're going to see is we have paragraph one, paragraph two or paragraph three, and Paragraph three is the one that's going to be highlighted in yellow. And we see that here and again. If I just re add Span one. Guess what? It doesn't work. It breaks the mold. Now let's see what happens when we get rid of everything in the body and we do this with just a regular old page. There's literally nothing on this page is You can see I just paste that back in there and it works. Still now. The reason for that is because again, brothers and sisters were looking at siblings here and now Body is the parent. No, I'm saying don't do that because I like having all that other stuff around. Kind of makes the page look a little nicer. And you is No. But I would like you to do as your task for this lesson is right. 3456 Right. A handful of elements and just select the last one. They should, ideally, all be the same. But I want you to try something in here. So what happens when you type span one right in the middle? Is this still going to select your last paragraph? Is it going to select the paragraph Number two that we have here because, Well, technically, it's the last one before the span. These are questions that you should be asking yourself when you see things like that. So I want you to give us a shot. Find the answer for yourself. If you have questions, you can ask them either down below. Ah, or if there's no comment area down there, you can ask them in the Facebook death Group that we have called learning to code 15. Pseudo Selectors: Focus: the next pseudo selector to learn about is focused. Now this one is sort of a big deal. That's because whenever you click into or you tab into or on your phone, you put your finger on the input field and like, what's whenever you enter your name, your phone number, your email address text area for writing comments. The focus pseudo selector is then triggered, and you can style your element a little bit differently based on the situation. So let's go ahead and create an input type of type is text, and that's fine. And let's create a class here was going test. Go to our style dot CSS and type test and order one pixel solid red so you can see that this is actually selecting the right one. Okay, this is nothing. Fantastic toe. Look at Go ahead, change the width. 200%. Now, this is gonna be big is going to take up the entire width of your page. So if you've got a big browser, this is going to go right across. Let's change the font size to 30 pixels. Let's change the padding to 10 pixels already. This is starting to look pretty big. We don't actually have to preview what you had to know. That this is getting pretty big. And let's change the color from usually something like black or something to Ah, something just a little bit lighter. Okay, so we have this huge text area in here, I'm gonna actually change that padding. So there's no padding on the left or right? There we go. So it's all in view now, and we can see this is a big old text area. No, I'm actually gonna get rid of that, too, because that looks kind of gross. Cool. So that looks looks OK, is a regular text field is what it is. But when you click into it this part here you see how that outline shows up. That is the focus selector at play. And that's what we're going to change. So you type in test and then you've got to your pseudo selector focus and you can change the border. A change of border to actually changes one to read every time we click into it is gonna change Red. We can't see that yet. Let's remove the outline, outline zero. And now we can see that border is red. There's not this, not that little blue shade behind it anymore. And let's actually make that bigger. And let's changes to black so that we can really see what's going on. Look at that. Now we really know that when you click in there, you are actually focusing on that area. You can have little effects on it, too. For instance, you can have the color actually be something quite light. So let's go with 999 But when you're focused in there, let's have a color actually be black. So when I refresh the page, you don't see anything in here. And I just say hi and my name is Caleb. Okay, so this Texas black and matches the board or right? But when I move out and not just move my mouse out of it, But when I click out of it and that is called blurring. So when I blur out of this this input element, everything sort of fades back into the background. In fact, what we could do is we could change the entire oh pay city to something super light like 25%. But on focus, we could change out of pasty back toe one. So now it barely looks like there's anything there. But when you quick into it, all of a sudden there's something there. You type in it, click out of it, and it sort of hides itself back into the background. Now we've seen this effect on every website since. I don't know whenever this was invented quite a while ago, and this is not a feature that's fairly uncommon. This is actually quite common. So what I would like you to do, as your task for this lesson is, create an input. It's a regular input field, and then when you put your mouth into it and actually click in so you can start typing and want you to change the styling at that point, remember, that's called focus. And every time you use a pseudo selector, remember to use the colon 16. Pseudo Selectors: Checked: they're often comes a point when you need to use a check box in order to style something. Now, in this lesson, I'm going to show you something pretty cool. But first, we actually have to learn how to use the checked pseudo selector. So let's go ahead and creating input and the type is going to be a check box. And that's all we have to type because we know how to select this exact thing. So let's go over to style that CSS and type in input type is equal to check box. And I just want to make sure that we are actually selecting the right element here. And guess what? This one doesn't look like anything is happening. Why is that? Well, is it? Input is a type is a check box. Well, I can tell you that all of these air actually correct, but the problem is, check boxes don't have a border. You can't give them a border. But what if you changed the height to I don't know. 50 pixels and the width to something like 50 pixels make it huge. That's a pretty big check box, right? Okay, so we're gonna get rid of that border because we now know that check boxes don't have borders. Likewise, radio buttons don't actually have borders around the round part of the radio button, either. And let's go ahead and give this the checked pseudo and I'm Zoom in there and let's refresh . Okay, so nothing happens. But when I check it, it gets bigger, and when I uncheck, it gets smaller. Cool. So that's the That's the checked pseudo selector. It's not fancy, it's not awesome or anything, but there is something cool you can do with this. So going back to the HTML, we have our check box here, and let's also have a div called Demo. And this is my demo content. And whenever this check box is checked and the next element in line is div dot demo, will you actually want to change the background color of that two blue and will change the color of it toe white? And so when I refresh the page, it just looks like a normal check box with a plain old div under it. But when I check it, look at that now. That's happening because I checked the check box. Now you want to do something even cooler. Watch this. Let's create a label moves down so you can see it. And it's called, uh, seebach. Stand for that'll just stand for check box. I don't want to use the word check box that might get a little bit confusing. Using that too many times, I d see box Uh, click This label this'll a bell. So when I put my most over over this label and I click it now, it's being triggered. So now our label is effectively the trigger, and we're not using any JavaScript for this, either. This is just pure CSS. So let's take this one step further and let's put a button in here. And the button does not need to be fantastic by any means. It just needs to be a button and let's style position relative. And let's change that so that it's down 50 pixels. Refresh your page. We have a button way down here. I could have just as easily added margin or padding or anything like that, but I wanted to use position relative to show you that we can use it this way, and when I click this button actually this should say button, but because it's wrapped in a label that labels also going to get triggered, and when that label gets triggered, it's going to check or uncheck the check box. And when that happens, this is going to change. No, this isn't actually working, but when I click into it, you can actually see if use out here, I'll zoom in here. But when I click in, you can see that the input box, the check boxes actually being clicked. Now it's not working because we actually wrapped it in a button, which sort of, I guess, was Ah, in hindsight, a bad idea instead of what we should have done is probably rapid in a plane will span. And then we could style the span like a button. And so if I did this, if I'm since quickly style this like a hot button gray color, let's change the color too black. And let's add some padding five pixels. But that's not going to take effect because the display is not in line or in in line Bloc. Rather, it is in line, so padding is not gonna work, and there were goes. We have a regular button. Okay, Nothing fancy. Click it. Here we go. So this is getting a little more exciting now. So now we have some interactivity again. This is just using CSS. Now, where would you ever use a little trick like this? Well, you know what? You're on a website, and you see the little hamburger menu up here and you click that sometimes it's javascript . Sometimes it's just see assess. It really depends on the front end, developer. Most times you can get away with just using this trick, and it totally works. Other times you have to use javascript really depends on your situation. What kind of browser you have to support. But this is a pretty cool trick. So your task for this lesson is to not duplicate everything I did here. If you want to try, be my yes, go for it. I'm gonna leave this code as is, so you can download this or just pause it here and copy it if you like. But instead, your task is to simply select a check box. And whenever it's checked, change some of the styling. Try changing a border. Try changing a background color. Try changing the font size, see if anything does or does not work. There are some attributes that just don't work with check boxes. And there's some attributes that just don't work with radios, either. And that's just sort of life that we have to live in as a front end developer. And there are ways around that using JavaScript, and there are sort of ways around that using CSS, and that would be like one of these little tricks here. So give that a shot and we'll see you in the next pseudo selector class. 17. Pseudo Selector: Disabled: Which one's next? What are we gonna learn next one is disabled. Okay, this one is super simple. So in html, you know that we have a disabled with that oversee conceit all in one line, we have a disabled status on an input field, and it disables it for us automatically. And it actually looks like this is able like I can't click in there, but in order to actually select that, all you have to do is if you hadn't guessed it already, type colon disabled. And now we can override the styling that the browser gives us by default. So if we wanted to say, uh, input fields are that are disabled, what are we going to? Let's change the background color to black. Let's change the border to to pick so solid red. Let's woo Let's change the O pe city to 25% refresh. And there we go. It doesn't look like much because I don't pay cities actual. Let's remove that stereos. We've got a little bit of a red border. We have a black background and you can't actually click into it. So that's all that one is. That one's really, really easy, and this one typically is reserved for input fields that can actually use the disabled attributes. But what happens when you add a div? And we did some experimenting earlier with different types of attributes? Because we said that CSS doesn't actually care about what the attribute is or if it's valid or not? Well, let's see if that rule still applies when we use a pseudo selector, someone right test in here and you see that it didn't do anything. The pseudo selector does actually care whether or not it is valid, And that's important because the browser needs to recognize whether something is disabled or not, whereas with a regular attributes, it doesn't really matter that much because the browser doesn't care if we just throw a bunch of junk into her HTML as long as that HTML is valid At the end of the day, it doesn't matter. But when it comes to a pseudo selector, a state on the element, whether it's hover ble or disabled, or whether it's checked or we can focus into it, the browser cares about that because that's how you really add interactivity. What I did earlier. Actually, I wouldn't have worked anyways because I had selected the input. But what we can do is we can do disabled with def and we can also do it with input. Wanna show you that? I'm not just blowing smoke? The inputs going to stay with a black background Red border. But the Div does not Civ Div See, nothing works. However, if we just change that to classes Eagle to disabled And instead of using that we did disabled Now it works just like that. If you want a little bit of practice with this one Ah, go ahead, create an input field. So disable it using HTML like what you see here and then style it differently using the disabled pseudo selector. If you don't want to do this one, that's fine. Ah, I think you're getting the idea behind the pseudo selectors. I would say more practice is always better, but I mean this one is I mean, you could probably watches one and understand what this does for the rest of your life Already I'll see the next lesson 18. Pseudo Selector: Enabled: in this lesson, we're going to learn how to style input fields that are already enabled, which sounds sort of strange, considering input fields by default are enabled. But this really comes into effect when you start learning about JavaScript and you start disabling and enabling text fields depending on certain outcomes. Now we're not going to get into the fundamentals and programming logistics behind JavaScript. If you want to learn about JavaScript, I have a great JavaScript course. So what we have here is we have to input fields. We've got one that's disabled, one that's not disabled. You can tell because the browser makes them look different on its own. Now, in the last lesson, we learned that disabled is, well, just disabled. Weaken, weaken style. This based on whether or not it's disabled or not. And so, ideally, we were just write input and assume that this is enabled. And if there's an input field that's disabled, we would change it. And if that's what you're thinking, then yeah, you're absolutely right. We could do that. So, as an example, Mr this two picks of solid red actually make this really blatant. Let's do eight pixels. Okay, so we know that one's disabled and enabled. What about this one? Let's do a border. Eight picks of the solid green. There we go. Now we know that one is enabled and one is disabled. That is literally it. That's the whole lesson. So this one is pretty easy. There's no task for this one because it's the exact same as disabled. Ah, except instead of running D I s in front of it. You are writing e n. I mean, that's the exact same thing. So you don't have to. You don't have to do a task fits when. If you want to go a little bit of practice. If you want to actually get your hands on experience with the difference between these two , by all means be my guest. I would definitely encourage that. But if you don't want to, then hop on over to the next lesson. 19. Pseudo Selectors: Not: there's a pseudo selector called Not and actually we're not going to learn about that one now. I'm just kidding. So the not selector is actually really, really cool, and it's a great way to select everything that you don't want to select. So if we have a paragraph called Pera and Moscow Paragraph one, I'm literally using no creativity for this. So bear with me on this one, and we have one right in the middle here. Actually, I have an even better idea. Let's do paragraphs groups for getting out. He's my editor, apparently Pere. And let's do graph, Okay? And what we're going to do is we're gonna end up selecting all of these except actually want to be three, four and five. So we're gonna select all of these except the middle one. Now, how do we select thes if they all have the same class? If they're all basically identical except everything else has the graph class and that's the one that we want does not. Well, I'm glad you asked. So we type p Doctor Pere and that's just to select the paragraph. We don't actually need that in there, and we use the pseudo selector not. I'm gonna zoom in here due to select or not dot graph. Now, this looks pretty strange and that's because this looks a lot like a function. If you come from a programming background, function looks a lot like this. So that's generally a function in most programming languages in CSS. It doesn't look too much different. Ah, and in future versions of CSS, we're going to see more of this. So what we're saying here, select every instance of paragraph and then make sure that every instance does not have the class of graph now it doesn't have to be a class. It could be an idea. Could be an attributes and as an example here. So, actually, I want to show you what my page looks like so far. Background color, black and because the for authority, black is going to disappear. And there we go. So, just like that, we've selected not one, not 245 But we did select the middle one. Now, if we wanted to do something like this in a real life scenario, chances are you probably actually want to hide this display. None. I don't need a background color if we're hiding it. And there we go. Now, I feel like I may have gone a little bit fast on that one. So I'm gonna start over with a different example. So say you have a paragraph, and in this paragraph is a bunch of alarm. If some text and I wasn't going grab some text La di da di da Pay no attention to this because this is boring and has nothing to do with CSS. OK, there we go. So we have some text in here and in here we have a few spans. So, actually, what I'm gonna do is I'm gonna write span dot color dot blue. And all this is supposed to do is make certain words blue. That's it. So mad one here, I might add one there, and I might add one here and flash spin slash, span, slash span And in my style dot CSS. Let's go ahead and add color is gonna have some sort of color and blue is going to be color blue. So I refreshed my page and there we go. We have Laura MIPs, some with a bunch of blue text in there. Okay, again nothing fancy, nothing really toe get excited about. But what if we had Maurin there? And this is where real life comes into play. So it's no longer just a paragraph with a bunch of spans in it that are all the same class . It would be a paragraph with instead of blue, it could be read. And instead of read, there might be one in there. That's let's change us 12 What color do you want to pick Purple. Okay. And I'm gonna actually clean this up real quick, but some multiple lines. And so instead of blue, what we can do is write, read and set of blue. There we're gonna type purple or actually type purple or actually type purple. Third time's the charm, and there we go. So we've got some red. We've got a purple about a bunch of blue in there. Get rid of this one, cause that's not necessary either. Now, let's say in your rich text, editor came up with a bunch of these and they're all over the place. And you actually just want to target the red ones. Or actually rather you just want to target the blue ones And you want them to all be black because you don't want to look blue. Maybe you don't like the color blue. Okay, So if say, we wanted to select the blue areas and we want to change those back to black Well, we could just do spanned out blue and change a back to black. Sometimes that's not an option, because what if they didn't have the color blue and by default, uh, what am I doing here? Copy this changes over, um, color blue doesn't exist on. I changed the name to just color, so it all looks the same, but there is no blue in here anymore. How do we target these blue ones? Well, we would go span if we wanted to select the Spanish. Me. We don't necessarily have to select this band with, but we can select color that is not read and is not dot purple, which would be both of those classes. And we changes color to black. Actually, I had made a typo in there for about to put Not so Now I'm changing these pseudo selectors together. Snow. I'm saying select all the classes of color and select all of them except the red one and then select all of those ones except the purple ones. And so now when I refresh my page, they're all black. And again, if I just comment that out, you'll see that they go back to normal and what I uncommon. There we go. They fit in. And so that's a real life situation in where you would actually use the not selector. Now, if you're a little bit confused with this one, that's absolutely OK, actually. In fact, if you are confused with it, I would suggest spending a little more time on this task more than other tasks, because this is the opposite. Up until now, we have always selected something very specifically. This time we are selecting something very specific but broad, and we're actually filtering it down using other parameters. And so we're trying to get the inverse of what we want. In a sense, I mean, that's not technically right, but it's not technically wrong either. So your task for this lesson is to create a paragraph, throw some Lauren Ipsum text in there at a bunch of spans in there, I would say, add nine different spans with three different colors each. So three blue three red on maybe three yellow. And when you type in color and instead of adding blue in there, just get rid of that blue, so all the colors should have a default base off blue. And then I want you to select the blue ones, just like what I did in this one. But I want you to select them using the not selector. And that's hard to dio because there's no way to select just the blue ones. You have to select all of them and filter him down. And then I want you to go ahead and change that font color from one set of blue, maybe change it to read or change it to black, so it fits in. I do expect that a lot of people are going to have questions with this one, and if you do definitely feel free to post them in the Facebook group or if there's a comments section down below, ask questions. In there. I'm more than happy to help 20. Pseudo Selectors: Before: alrighty. So pseudo selectors are usually pretty good for selecting something, but they're not really great for creating more content. To the exception of the before and after now, these are pseudo selectors, but there's a difference between a pseudo class and a pseudo element. And any time you see the double colon, which you actually see it the title here that is a pseudo element and a pseudo element. Ah was introduced in CSS three as a way to distinguish between pseudo classes, which is basically what we've learned about up until now with the single colon and the double colon. Instance, which is an element now. A pseudo element is most commonly used to actually create content, so or even just modify some instances or some parts of an element. So if you want to capitalize the first letter in a paragraph, you might want to use the pseudo element. If you wanted to. Ah, add some content before an element you would usually before one, which we're gonna learn about. And if you want to create some content afterwards, you use the after. Now there are some pretty cool things you can do with this, especially when you get into, like, three CSS transformations, um, and animations and what not? I mean, things get pretty cool over there, but baby steps, right. So we're gonna do something pretty cool here. We're gonna create one CSS box, and then we're going to actually create another one beside it, using just CSS. So to get started, that's creative style. You know what? Let's not write it in line, Div. And let's just call the class block, Go over to style dot CSS by my class block display in line block. Um, let's do you know what? Let's let's float this one right. That's to a with of 200 pixels, a height of 200 pixels as well and a background color of white with a border of one pixel Solid C C c. All right, check this out with the actual border. Okay, So cool. We got a little We have a little box in there, all right? Nothing fancy. Nothing. Nothing. We haven't done like, 20 million times already, but with the pseudo elements called before. And remember, it has the double. Coghlan's in it, and I'm gonna zoom in here. We can actually add more content and this is super cool. So let's do display in line block. Ah, a little trickier for the before and after is it is expecting content so you can actually use the content property. And for this one was gonna fill it with nothing. Let's change the background color to black so you can see it refresher page and see where we're at. Can't see anything yet. What if we did position relative? And then we said, Let's move it from the left to the left by 200 pixels or the exact with off this block So we still see nothing. And so at this point, you're probably thinking, Ah, well, you know what? This doesn't work for me or what's wrong with my browser or what's the deal with this? Well, the key is your block element should be positioned relative and work. Believe me, we're going to do something pretty cool here, position relative. And instead of in line block, let's do, uh I mean, that doesn't hurt to be there, right? Let's do you position. Absolute and top zero left zero Ah, we don't actually want the right we want With of 200 pixels and We want a height of 200 pixels as well. And now I refresh my page and look, there we go. We have two blocks now. The difference is one actually exists in the code and the other one doesn't. When I right click and go to inspect here, there's literally nothing there. There's nothing to grab. That's pretty cool. Now what happens if I add the hover? A pseudo element in there, a pseudo class in there, The pseudo selector I do block hover. And when I hover over it, something happens. Look at that again. No JavaScript, no animation, no flash, nothing like that. It's just raw CSS Now you might be thinking, Ah, well, you know, really, What's the point? Can we even add any content to it? Well, let's see again. Always be curious. Special with front end isn't Hi, my name is Caleb and see where it says Hi. My name is Caleb. It doesn't actually exist again. Go to inspect. There's nothing there. If I hover this, try it again. There's still nothing there. We can see that there is a before, but can can we edit that? Ah, no, we can't. We can't go in and edit that. That is in our CSS. So in my opinion, that's pretty cool. But what if we don't want to float it right? What if we want to display in line block? And what if we want to actually make this look a little bit nicer? Let's change this up a bit and create a cool little example here, and this example is actually going to bleed into the next lesson as well when we learn about the after pseudo element. So margin talk. Let's do 50 pixels. Ah, and auto so that it's centered, which didn't work because I wrote top for some reason and right, that's not supposed to be in line block that's supposed to block there. Really? Okay, so you can see that it still works. Okay, La di da. No big deal. I'm gonna get rid of the content because it doesn't need to say, Happyness, Caleb, I mean, change background colors is something probably a little nicer, I think position absolute. Um left. Let's let's not do that. Let's just make it so it's sort of like two layered squares, something a little bit artsy here. So left minus 20 top. We want minus 20 as well. And so essentially, what that saying is move it over to left and just up just a little bit and we can't seem thing it because I gotta take off that hover. So there we have it. We have what looks like the red block, actually being in front of the way block. And if we wanted to change that, we could change these at index. Let's change it toe minus one. And let's give this one a defaults ended index of zero. And now we come into this CSS battle of like, What is these? Ended? Is that index? What should it be? I have found that in a lot of browsers it it's varies from year to year. I mean, I've been doing this for ah, two decades now, almost, and I've sort of seen this pattern. Where sometimes does that index is the same across all browsers. Sometimes it's not. You really just have to figure out what works in this case. Not having is that index on the block itself, and only on the before element actually worked. And so this is the before element. What we did was we actually created HTML from CSS. Now it's not in the code is not in the source code. It's in the source code of the CSS, but not in the HTML. And in my opinion, that's super super cool. So your task for this lesson is to create a block, create a square 200 by 200 and then I want you to write the before pseudo element, and I want you to figure out how to basically duplicate the block and just move it off. Just shifted off of it. So it looks a little bit artsy like this. Feel free to spend a little extra time on this one. This one's tricky, but when you get into really nicely styled websites, this is definitely a nice tool to have in your in your tool belt. Don't forget to ask questions, and I will see you in the next lesson. 21. Pseudo Selectors: After: continuing from the last lesson about pseudo selectors using the before pseudo selector element. We're going to learn about the after pseudo selector, and this one is ah, pretty much the exact same as the before ones. We're not going to go over to much of the same content if you don't know where we're at. If you're just coming into this video from a from somewhere else, there's another video called pseudo selectors before going watch that one. It should be right before this one. And what I'm going to do here is first I need eczema because that's a little too big for me . And I'm gonna copy this block over and instead of writing colon cold before I mean right, colon colon after. And I'm gonna change the background color to black left. 20 On who bottom, You know, actually, this is the exact opposite of what I want. Here is minus 20 pixels on the right and bottom minus 20 pixels. And what I'm doing the here is I am setting up this white box, but after it is going to have essentially the exact same as this reddish brown box here. But it's going to be black and going to be positioned somewhere else. So when I refresh the page, I now have three boxes in a row, and so this looks a little more three D than the average page usually does. And that's only because I'm using three different layers with one HTML element and just to show something. Helu, Let's do that. Change content in there and again that content that is from CSS. That is not from HTML, that is from CSS. And so that's fairly new and CSS these days. We didn't have that when house grown up with CSS, and this just makes so much of a difference now you might be thinking, well killed. Why would I ever use us? Well, that's a really, really good question. First of all, if you want to do anything artsy or design like this is the way to go, I mean, this really enables you to do something. If you have a website where the structure is hard to edit or you don't want to go in and mess with any of these militias, you might break something. You can write a particular selector to select really any element and right a before and after pseudo element to add Really anything else you need And it doesn't just have to be a box like this was just an example. If I wanted to make the smaller instead of 200 pixels, just 20 pixels and I'll do the same thing with this one now they're just little corners. But the caveat is, you can only ever have one before one after on every element. So putting this in all corners is going to be a little bit tricky. Now I'm going to want do that and just show you what that's all about. Cool, cool, cool. And I'm actually move it down because I really like this example. And so I'm gonna move the margin Smooth margin, 250 pixels. Something like that. Okay, so let's get into a real life example with some actual selectors. Okay, As much as I like this example, it's not practical. So what I'm gonna do is just move all of this down spirit of all that spacing. It's unnecessary. And let's create a paragraph. Welcome to my website. This is where I code websites. I once coated a website from the remains and ashes and bones from old websites. Old with any. So you know it's really old. A basic paragraph. But what if we did? For more information, click here and we create this little link and it's just Ah, go read more. It's just Oh, here's a little excerpt of what Your Block Post is. Maybe go in view a little bit more. So we go website dot com slash read more dot html. Whatever. That's gonna be refreshing. I got this little link here. Okay, we know through all the other selectors that we learned how to select this one. And we're going to do this by typing a h r e f. And it has to start with and you're going to see what I'm getting at in just a second. But it has to start with https. So just bear with me here. Search with https after content secure. Actually, let's add a space in there and the truth of fun sized font size 12 pixels. Let's give her the text decoration, text decoration, none. Color green. Now that text decoration is actually not from there. It's just from the link itself. So what I'm gonna do is I'm gonna create a selector just for the link itself. And then they create a pseudo selector for the after And when I refresh my page, look at that. So for form, for more information, click here, and it's just you, Earl and the UL extends to this little security in parentheses. And that just tells people that this is an https website. So this is a really life example. Now, what if we wanted to use before And let's just go through these scenarios here. So we have something, something, something, something dark side, something something. And in here we have just a span called label and deal, and it's supposed to say $89. And we know that this is a deal because of the class. So maybe your content management system is just generating this for you, and you want to change some of the styling. So what we could do is we can select this. We can go. Um, yeah, I was labelled dot label that deal before, and we can change that content as well. And we can say, uh, we're my caps here. Deal, background color. Let's go with black display in line block padding five pixels. Ah, font size 14 fixes. And so when I refresh the page, this is what it's gonna look like. Oh, okay, Color. What color is what color is a deal? Usually purple green. I think it's mostly green. That's not degree, though. That's Ah, that's too yellow. Hashtag yellow again. This does not exist in the document object model. Well, I mean, in a sense it does, but not in the traditional HTML way. And so now all of a sudden, without having to write any extra HTML, let's say this was just there for you and your boss came up to you and said, Hey, I want you to throw the word deal in front of this and style and make it nice. Or just make sure that everyone knows that this is a deal. You could say, Oh, yeah, you know, Mr Boss Guy, I know exactly how to do that, and you could use the before or you can use the after pseudo elements pretty cool, in my opinion. And so this is just the tip of the iceberg. Once we start getting to like animations, transformations, things like this whole thing, it's really, really, really cool. And then once you start introducing a little bit of javascript as well, um and that's when your web pages start becoming completely animated, like, full on cartoons at some point. And it gets really, really fun just to build. Now, your task for this lesson is to right a little paragraph. It could be really anything Doesn't matter. Put a Lincoln there. And if that link starts with H T T P s. So it's a secure you, Earl, right? A little secure in there. I can't even grab it. It doesn't let me grab that right. This little parentheses, secure parentheses, the brackets in there, make sure it's green, and it has to start with https. If it only starts with each. If it starts with anything else, it doesn't work. But it has to start with H T T P s. If it starts with that, then then you can use the after pseudo element and inject that in there. Feel free to references, code any time. And if and when you have questions, feel free to ask me, either In the Facebook Group