Transcripts
1. WELCOME!: Hi, everyone. Thank you so much for clicking on this class. My name is Verity, and I'm a front-end developer from Sydney, Australia. Now, in this class, we're going to be taking a deep dive into CSS selectors, and how you can use them to level up your styling game when you're working on your web projects. Our project for this class is going to be working with an accordion style menu which I've already put together for you, and you can download those course files in the "Your Project" section under attached files below this video. We're going to be looking at that accordion and seeing how we could use those advanced selectors to style elements in different ways and more specific targeted ways that is going to just make your Web projects so much better. Now, this course does assume that you've worked with CSS and HTML before, but if you never touched either of those, don't worry, you can go back and have a look at my previous class, which is called How to Build a Website, and that will give you some foundational skills in HTML and CSS. Then, you can take this class which will just build upon the skills that you will learn in that class. Now, if you get stuck at any point, make sure that you comment down below, and I'll try and help you. Hopefully your classmates will try and help you, and, of course, make sure that you showcase your work in the projects section. I'd love to see how you customize the accordion and the effects you can come up with. Just experiment with each of the different types of selectors, because the best way to learn is, of course, by doing. Okay. If you're ready to get started, make sure you download your course files and let's go.
2. BASIC SELECTORS: If you've worked with CSS before, you've probably come across the three basic selector types but just in case, we're going to do a quick little recap now to make sure that everybody's on the same page. So, our basic selectors that you would use every day in CSS are your element, class and ID selectors. Now just to give you a quick reminder of what each of these things are. An element selector is the way that you target any element on the page of a specified name. So, within your html, you may have a P tag, an image tag, a div tag or a span. Just as an example, it could be anything and the way that you would target that in your CSS is simply by writing the name of the element in CSS followed by your curly brackets and then your styles inside of the curly brackets. Now, a class applies styles to all elements on a page which you have given the specified class name. A class is written with a full stop in front of it and you can name it whatever you like as long as you give the class attribute to the element you want it to be applied to and put the name in between the commas. Now, class differs from an element selector in that an element selector would select every single paragraph on the page, whereas a class selector is only going to target those elements which you have given the class to. So, say you had a series of paragraph tags on your page. If you've only applied the class to one of those paragraphs, the styles will only get applied to that specific paragraph. Finally, our ID selector which is the most specific out of the three. It's written in CSS by using a hash before the name of the ID. It functions very similarly to a class but it's important to remember that an ID meaning identification, you can only use an ID once on a page. If you use it more than once, it's going to cause all kinds of mistakes and problems for you.
3. INHERITANCE & SPECIFICITY: Hey! You probably heard this before, but the acronym for CSS stands for cascading style sheets, and it essentially works on a waterfall type method where the further down the page the styles are, the more importance they're given in the browser. So, anything you've written up the top, if there is a selector that targets the same thing down the bottom, that style is going to get used. Now, this can work in a linear top to bottom way, but also in terms of specificity. The more nested a class is, the more specific it is, and therefore the more important. Now, in our accordion, we see this demonstrated all the way through our stylesheets but we'll go into our html just to have a quick little look at an example. The first example being this lesson-title, this little section here that we have saying what lesson we're on. On this lesson title section, I've given it a class and an ID of title. If we go into our CSS, we can see that I've applied text-align: center to the lesson-title class. Now, to show you how inheritance works with selectors that are of equal level of importance, I'll create a second instance of the lesson-title. This is the same class being applied to the same div. They are of the same level of importance, but our second instance of lesson title is further down the stylesheet, meaning that it will override our first instance. If we save this and we go back onto our page, we can see that at the moment it's text-align; center, which is the original class, but if I refresh the page, you can see that that second instance overrides it and applies text align: left. Now, classes are probably the most common selector that you are going to use in CSS, but you've probably also seen the use of ids here and there. Now, as the name would suggest, an ID is a highly specific unique identifier which you can apply to your HTML to differentiate it from other elements on the page. But, you need to keep in mind, as I said before, that you can only use an ID once on a page, and that any styles that you apply within the ID is going to override any class or element level selectors because it's given a higher level of importance in CSS. So, let's go back into our CSS and I'll demonstrate what I mean. We'll get rid of our second instance of lesson-title class. We don't need that at the moment. You can see up here, if I comment it back in, I've selected out title ID using hash and then the name of the ID, which is title in this case, and I've applied text-align right to it. Now, if ID and classes have the same level of importance it would follow the cascading style inheritance that normal classes do. If that was the case then, the text-align should be centered because it's further down the page. But, because in CSS IDs are given a higher level of importance, we can see on our page that if I refresh it, it actually goes over to the right even though we've written this style higher up in the page because it's an ID and it has a higher level of importance in CSS, it overrides everything that's below it applying to that specific div. When working on larger projects, I usually avoid using IDs as much as I can in my CSS because it does create an extra level of complexity with solid inheritance and specificity. A lot of the time, young developers or developers just starting out, will try and use something like an ID that has a higher level of value to try and override issues that they're having in their code. Now, I really, really, strongly encourage you not to do this. You're just going to create more heartache for yourself when that issue comes back again and you're going to have to find another way to override it. It's always better to work out the issue from its core rather than using brute force tactics, like IDs.
4. NESTED VS GLOBAL STYLES: One of the questions I got asked in my last course was the difference between a global style versus nested style in terms of specificity. So we're going to have a quick look at that now. You can see here accordion in the browser, it's just a series of draws, with different types of content throughout. So if I go into my index file, you can see that I have the wrapping class of accordion that goes all the way around it. Then we've got a container for each of our draws with the class draw, and inside we have labels and descriptions. Now, in our CSS, you can see I've written the class draw, and given it the style of cursor pointer border bottom two pixels solid white. Now, because there's nothing preceding this class, it's a global class. What that means, is that no matter how many times I use this class on the page, and no matter what I use it on, even if it's not supposed to be a draw, these styles will get applied. So, if for example, if I was to write, transform, rotate 5 degrees, and I'll save that out and we'll have a look. You can see that every one of the draws has rotated by 5 degrees. Now, I know this looks a little bit stupid, but it's just an example. So now, obviously, each of our Dibz has the class draw, so that makes sense that it would do that. But what about if up here in our title we were to write the class draw? It's not within our accordion, but if we refresh it, the same style gets applied. Now global classes can be very useful, because say for instance, you have a containing class that you want to use over and over, or a base styling. Say you want all of your links to have a red color. That can be very useful. But it can also be very frustrating on, say when you're building a multi-page website, and you accidentally reuse a class, that sounds like a very general class name, but you didn't mean to. So say something like a label, say we've got the class label here. In this case, we're using the label as this green section in a draw, but, you could use a label in the context of say, a form, or an image, or a quiz. So, you could have a 100-page website and use labels in all different kinds of places. But you might not necessarily want them all to have a green background and white text. So that's when nesting becomes very useful. So, in our index, you can see that our label is contained by a parent div that has the cost draw. So, we have the global class of draw, a space, and then the trial's label and we've applied our styles. So now, if I was to go into our HTML, and I'll get rid of draw, and let's write label, and refresh, and nothing happens. This is a label for the site technically, but it isn't given the green background, because it's been nested. So, unless you have this draw container outside of label, those styles aren't going to get applied. Now a good thing to remember, if you have classes, say like with our label and description, we have different styles applied to each of these classes, but there may be things that you want them to share. One thing that you can do if you want to keep your classes separate, but apply certain styles that are the same, you can actually chain classes by separating them out with a comma. So, I have the draw and the label, and then draw and description, and I want to give them both a border of one pixel solid red, we've chained them together. So now both the label and the description have been given a border. Knowing when to use a global style versus a nested style is something that comes down to you as a developer, and you assessing your particular use case. A global style is great for things that you would like to reuse over and over again in your site, but a nested style I would actually recommend for most of your styles to put them in the nested scenarios so that they're not leaking out in places you don't want them, but also to keep in mind that if you go too many levels down in a nested style, it can become too specific, and too fragile, so you're not going to be able to reuse it anywhere on your site. A general good rule of thumb is three levels of nesting maximum, so that you retain that flexibility of being able to style over and over, but not so flexible that they can be used anywhere on the side.
5. UNIVERSAL SELECTORS: A universal selector is a fairly straightforward concept and it quite literally means that you can apply styles to everything on the page, so the style is universal. Now, in CSS, if we go into CSS, you can see that the universal selector is applied in CSS by using an asterix just on its own, and you can see that in our code and example, I've used the universal selector to apply a font family of san-serif if I comment this out and save it. Let's have a look. You can see that it's going back to its initial form. So, by applying this style of font family san-serif, it's affected everything on the page. Everywhere that there is a font, it's changed the font. I've also used it to set box-sizing to border-box, which I would recommend you do with every single one of your websites that you built. I'm not going to go into what box-sizing actually does in this class. I covered that in my original How to Build a Website class, so you can go there if you want to learn more about what that property actually does.
6. COMBINATORS: The next step we're going to cover is combinators. Now, you've actually been using combinators perhaps without realizing it if you've written any kind of CSS before. A combinator is basically a way that you can target elements on a page depending what precedes and follows it. So, they're four main types of combinators that we're going to have a look at, and these are; descendant, child, adjacent sibling, and general sibling. Now, a descendant combinator, you've probably used before, maybe you just didn't know what it was called. It is probably the most common combinator, which is simply adding a space between two classes, so that you can target all the match elements that are a descendant of a particular class. If we go into the CSS of our accordion, you can see this all over the place. So, I'll draw to target the labels, we want to target the description, the image. This is basically saying, within the draw anything that has the class label should have these styles and that's a descendant combinator. The next one is slightly more specific, and that is a child combinator. So, as you can see over here on the left, we've got a parent class and the child paragraph. Now, you might be thinking to yourself how is that different to a descendant. Well, if we go back into our CSS, and we have a look. Let's have a look in our index actually. If we go off into our first draw, you'll see that within our description we have two paragraphs and then we have a description sub-container with one more paragraph inside of it. If we go into the browser, we can see that just comes out looking like three paragraphs. Now, if we go into our CSS and we target those paragraphs. So let's say, draw, description, and then paragraph. So, we're just using descendant selectors for the minute, and we say that we want them to have the color red, simple save this out, we'll refresh our page, and all of the paragraphs within draw on all levels are red. Now, that is a descendant combinator. A child combinator, let's copy this, select it down. We're going to replace this descendant combinator with a child combinator. So, we're just using a little arrow to say a child, and we want all the children, the direct children to have the color of purple. Now, if we go back into our page and refresh, you can see that the first two are purple, but the third one is still red. So, let's go into our DevTools, and we'll have a look at why that is. So, if we look at our HTML you can see, while this bottom paragraph is a descendant of description, it's not an immediate child, it's more like a grandchild because it is down on a third level. Our next combinator is an adjacent sibling. So, that targets the next sibling after the initial selector. You can see it here. We have the initial select plus sign, and then the sibling that immediately follows it. So, we'll go back into our CSS. In our third draw, if we go down here you can see that draw three has a paragraph and then two images. To demonstrate what an adjacent selector would do, if we use our draw, description, paragraph, and then the adjacent sibling of image, and we'll put a 10 border of 10 pixels solid black around it. So, what this means, is any paragraph tag that is a descendant of the description. We want to target the immediate sibling if it is an image. So, we'll save that, go into our browser. You can see that it's only targeted this first image, but it's left as the second one alone. Because if you remember in our HTML, we have a paragraph, image, image. So, this one here is the adjacent sibling, it's the next sibling after the paragraph tag. If we wanted to target them both, we would use the general sibling, which is this little wave here and that will target all siblings on that level. So, let's try that out, we'll will replace the plus with our little wave, and save. Refresh, open our draw, and you can see that it has targeted both of them.
7. ATTRIBUTE SELECTORS: An attribute selector is a really handy way for you to target elements on a page based on what attributes you've declared in your HTML. So, if we go and have a look at our index file, you can see we've got all different kinds of attributes already. An ID is an attribute, a class is an attribute. On our images, the source is an attribute. You can see here on the draws, I've actually included a data type attribute. This even is a way that you can create your own custom attributes just as long as you preface it with data, and then a little hyphen, you can name it whatever you like. So, perhaps you would want to call it data name or data active or whatever you like. But we're going to stick with data type for the moment. The way that you would target that in CSS, I've just copied in some information here into the file which will be in your finished project files. It's just an excerpt from the W3Schools page on CSS selectors because they are a bit difficult to remember off the top of your head. But essentially, the way that you would target an attribute in your CSS is say for example, we wanted to target outdraws with that data type attribute. You could just call the class draw. Then, without any spaces because you want to target the same element the draw is on, you would write the name of the attribute. So, in this case, I want to target every draw that has the attribute data type, no matter what the value of data type is. So, let's give that a border of one pixel solid red, and we'll save that out and have a look. You can see it's targeted every single draw because we have that data type attribute on every draw. Now, say that you only want to target something of a specific value. So, you've got your attribute of data type, but you only want to target those that are of the data type T01, for example. So, if we save this and refresh, now it's only targeting those with T01. Now this can be very handy. You can use it in a lot of different ways. I'm sure you'll find ways as you're building your websites to use this. Don't forget, also you can use it in combination with other types of selectors. So, for instance, with a descendant selector. Say that we want to target only those draws which have the data type T01, and we want to target the labels within those draws and give them a background sort of mustard colored background. We can do that as well. Now, as you see, we've got quite a handy little list here. Another example is using this little wave, you can target part of what makes up the value of the attribute. So, here they've got the example of the title, includes the word flower. Now, we could use that in our accordion to target their images. So, if we say draw image and we say that the source should include the word bike, for example, we want to rotate any images of bikes by five degrees. So, let's save that and refresh and open our draw. Oops, and that didn't work. The reason being that I wrote source instead of alt which is where you would write the description of what the image is. So, if we go into our HTML, you can see alt bike, alt doughnuts, and we only want to target that which has the word bike in it. So, even if we added other words, blue bike, and save that out, it would still target the bike because the value of the alternative tag includes the word bike. Another useful attribute value is this one here where you can target any attribute that you like and use the $ to search the value and find any attributes that have the value ending in a certain set of words or letters. So, for instance, we could search for draw image again. Let's search the source this time. We're going to look for any image that has the ending of jpg within the source. We're going to apply transform, let's say, scale 1.2. So, this is going to scale it up by 20 percent. We save and refresh. You can see it has increased in size. Now, there's a whole list of different attributes selectors that you can use, and I would really encourage you to play around with them, just experiment and with the different types of effects that you can achieve with these attributes selectors.
8. PSEUDO CLASSES: Now, Pseudo class is a way that you can target different states in your HTML and CSS. So, let's say you have something like a link, you would use a class for an element selector or whatever you want to style the link in its default state, how would see it say it when you load the page. But when you want it to say hover over that link, you might want the styles to be slightly different. You might want it to change color, or get highlighted, or underlined. So, you would use a pseudo class to target the hover state of that element. If we go into our CSS, I've pasted in just a couple of examples of pseudo classes that you can use, including our hover, our visited and the before and after. We're just going to take a quick look at how you would actually use these. So, we know that in our accordion we have our drawers with our label in description. So, why don't we use the hover state to target our label? So, let's write draw, label and we can use hover by doing a little colon, and then writing the name of the pseudo class, curly brackets, and we want our backgrounds to change to being this mustard color when we hold over it with our mouse. If I save that, and we refresh, and you can see that effect is now working. Another pseudo class that I do use quite regularly, which I wanted to mention, would be before and after pseudo classes. Now, that allows you to alter the state of/or add things in on either side on the before or after your element. So, say with our lesson title, a little h1 one here, what you can actually do is if I target lesson title and then the hatch one, I can use the pseudo class before to actually add content in before the h1. So, if let's say for example, I wanted to add two slashes in a spacing, and I want that have the color pink, and I want it to have the font size of 35 pixels. Let's say that and have a look at what happens. You can see there it is, it appears. So, we've written an extension of our HTML within CSS. Now, I wouldn't recommend actually writing HTML in your CSS but say, you're trying to create custom form fields or input buttons or something like that, it can be really useful to be able to add in this extra little bit of something before or after an element that you can style and customize. You'll see lots of examples of this as you start building more creative features of your website.
9. WHAT NOW?: There you go. You've had a look at some of the more advanced selected types available in CSS. I hope you've learned some new skills and done some experimenting with your coding to see what kind of styles you come up with. I'd love to see the work that you've done in the projects section down below. So, make sure you upload screenshots, code snippets, whatever you want, I'd love to see it. If you'd like to see more classes for me in the future, make sure you follow me on Skillshare and social media and I will let you know when I update any new classes. If you have anything that you would really like to learn about, make sure that you comment down below or tweet me or whatever you want. Tell me what you'd like to learn about and I can absolutely try and make a course on that for you. If you're feeling extra sweet, you can leave a review on this course, that would really help me out. I hope you've enjoyed the class and I will see you next time.
