CSS In-Depth, v2 CSS In-Depth, v2

Basic Selectors & CSS Levels

Check out a free preview of the full CSS In-Depth, v2 course:
The "Basic Selectors & CSS Levels" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Basic selectors include class, id and element selectors. She also introduces the CSS selectors available in level 1, 2, 3 & 4 of the CSS specification.

Get Unlimited Access Now

Transcript from the "Basic Selectors & CSS Levels" Lesson

[00:00:03]
>> Estelle Weyl: So, the link for this is estelle.github.io/cssmastery/. And I'm just gonna click on this and make sure that that link actually works.
>> Estelle Weyl: It goes right to selectors, okay. So when you go to CSS mastery, it's slash selectors, but if you go to that page you'll be linked to this.

[00:00:29] So throughout the deck, if you get lost, always just go to estelle.github.io/cssmastery and click on whatever topic we're discussing. We might not be at the first slide when you get there, but you can just go through it.
>> Estelle Weyl: Okay, so in terms of selectors, there are three basic selectors that have been around since forever.

[00:00:51] Which are the ID selectors, the class selectors, and the element selectors. Anytime you have an ID in your CSS, you can target it with HTML and with JavaScript. I like to reserve the ID for my JavaScript, and not add it in for CSS. And we're gonna cover so many ways of targeting elements, that you won't actually need to put an ID.

[00:01:18] But it will also teach you how to overwrite the specificity of an ID selector. You want to always use the lowest specificity possible whenever you are targeting an element. So preferably, you wanna use the last one, which is an li. Target all your lis, or you actually wanna target your entire your entire body.

[00:01:38] And everything that's inherited to have the exact same font and the exact same color and the exact same line height. You wanna make it very broad and then go more specific. So always do as broad as possible because your site will look way better than if you just do IDs, and then have to style everything individually.

[00:02:01] If you want to just target something specific, there's a lot of different ways to target it specifically. But if you have access to your HTML, you can put a class in your HTML, and then target it. So in this example here, it says class myClass, and class myClass.

[00:02:17] So when I put a period in front of that class name, I will target all the elements that have that class. So I will target these two. And then, when I use my ID, I put a pound sign in front of the case sensitive ID that'll match this right there.

[00:02:34] It is case sensitive as is class. So, through out the deck, there will be play times. If you're completely new to CSS, you can take the time, and play right here. I'm just gonna change this to font-size,
>> Estelle Weyl: 4em, remember when I said that there would be live examples throughout the deck.

[00:03:02] Whenever you see the CSS block in gray, it means it's editable and it will edit the rest of the page.
>> Estelle Weyl: Okay, so in CSS selectors, in CSS level 1, which was one large specification, they declared six different ways of targeting elements. There was the element selector, which we already covered.

[00:03:27] There was a descendant selector, which is just a space. And that space is actually considered to be combinator, a space is a combinator. Then there was a class ID, and then they also did links, and active links.
>> Estelle Weyl: In level 2, we got,
>> Estelle Weyl: Two more combinators, which was the greater than sign, meaning a direct child and the plus sign, meaning adjacent sibling which is the element that comes immediately after it.

[00:03:58] And then we got a bunch of attribute selectors, we got some pseudo elements including first line and first letter. No these have pseudo classes, no those are pseudo elements. Before and after,
>> Estelle Weyl: And then we go on a few other selectors including language, focus, hover, visited, and first child.

[00:04:25]
>> Estelle Weyl: In CSS3, we were given a whole slew more and we're gonna cover all of these. In the UI specification, user-interface specification, so not in CSS3 or CSS selector level three. But in the UI and now in CSS selectors level four, we got all of these UI features.

[00:04:51] Such as a something is valid or invalid. So, when you hear CSS three, there's actually no one specification called CSS3. Originally the first specification was CSS level one, then there was CSS level two and then 2.1. And they came in quick succession, 2.1 came very quickly after two and it fixed them things in two.

[00:05:16] And then CSS3 was actually broken out into modules. So when you saw the table of contents, those were all different modules, like selector is its own modules. When now it's CSS selectors level 4, the flex box and grid are at level one. So it's called CSS3, there is never going to be a CSS level 4 because everything is now module.

[00:05:41] Some of them are at level 4, some of them are at level 1. There's more CSS selectors in level 4, some of these are supported and some of these are not yet. And then we have some selectors that I'm going to cover some of or I'll just briefly mention, and some that we removed.

[00:06:01] So originally we were going to have a parent selector of E bang greater than F, meaning hit that parent that is a parent of F. They came up with a different syntax, so I'm gonna go over all of those. If you ever want all the selectors on one page I did create this resource.

[00:06:21] All you have to do is click open and this will open in another page.