The Universal Selector
Let's start exploring the world of selectors with a quick overview of the basic selector types and the joker card/selector. This is just a brief overview: for in-depth learning of how CSS rules work please visit our Absolute CSS course. By the end of this lesson you will have a refresher of the core CSS selectors available since CSS1 and will be introduced to the Universal selector.
properties: universal selector, type selector, ID selector, class selector
Video Transcript
00:00Welcome to our journey into CSS Selectors.
00:04Now you already know CSS and if you don't please pause and move right into our absolute CSS.
00:10We assume you know CSS but we're going to take a deep look into Selectors.
00:14We're going to skip a few Selectors that are just so core fundamental,
00:19such as the Class, such as the ID, and such as the Element Selector.
00:24But we're going to start off in this lecture taking a look at the Joker Selector as I like calling it
00:29or as the official documentations call them, the Universal Selector.
00:34The Universal Selector enables you to select basically everything by just putting there a star.
00:40Let's jump right into it. It's the first selector that we see, the most simple one introduced in CSS 2.0.
00:46So let's get started.
00:48CSS Selectors, and that is our main topic for this chapter.
00:52Let's jump right into it starting with the core Selectors, the most simple Selectors out there.
00:58So I'm going to go into our source files and right into our styles.
01:02I don't want to talk about them just going through ones that you already know,
01:05which for example the body or going directly to elements, which is something you know previously
01:11or you've been lately familiarized with in our absolute CSS training.
01:18Now those type of Selectors are literally just defining the tag, whatever the tag is,
01:22and then placing whatever values we want to put into it.
01:26The next type is classes.
01:28And we could see here a class and we could see here a class.
01:31So for example, for the article class, we set here a background color.
01:35And if we look at our element, we'll see this is our article and we have here a background color.
01:41So I'm going to go ahead here and mark this because this is also something relatively old.
01:45It's from CSS 1 completely available to any browser that supports CSS.
01:51Last but not least is the ID tag, which enabled us again from CSS 1 to control elements based on their IDs.
01:59So that's really the quick overview. I'm really not going to go deep into it.
02:02If you don't know what I'm talking about, then please stop because this course is not for you.
02:06Jump right into our absolute CSS where you'll learn a lot more about the rules of CSS.
02:12But that is just a really, really quick overview.
02:14That's where we're going to start this chapter.
02:16And I want to just talk about one more element that is a CSS 2 element,
02:20which is quite exciting, which we have not explored yet.
02:22Now, the CSS attribute is basically called the star.
02:26Well, it is a star. It's not called a star,
02:30but it basically enables you to basically define everything.
02:34It's kind of like a joker.
02:35And this joker is literally, I could just say, hey, anything that doesn't have a background.
02:40So I'm going to go ahead and set here a background to it.
02:43So I'm just going to set a background.
02:45We'll just set a background color or I could just go ahead and set it to be a background.
02:49And let me set here a color.
02:51I'm going to go ahead here and just select some sort of a color here.
02:54So let me just go to my browser.
02:56I'll select a color using this plugin, which is called Colorzilla.
03:00Make sure you install it because it's really helpful.
03:03And I'm going to go ahead here and select one of these colors right here.
03:06So that's the color I'm going to use as a default background to all elements.
03:10And literally, what we'll do is anything that does not have a background configured,
03:15it's going to slap a nice, beautiful background onto it.
03:18So if I go ahead and click on refresh, we'll see that now all the elements
03:21that didn't have a background will now have a background.
03:24Every single paragraph, every single headline, every single element
03:28that did not have a background previously.
03:30Obviously, that's a little bit mad, so I'm going to go ahead here
03:33and just comment that out because we don't really want that.
03:36But I'm going to go ahead also and make sure that you have that marked,
03:39oops, that you have that marked, that that is a CSS2 attribute.
03:43And our first CSS2 selector that we've met,
03:47we're going to meet a lot more of those throughout this course.
03:49Now, before I wrap up this lecture, which I'm almost done with it,
03:53you might think, why would you ever need to select everything?
03:56Technically, you probably would never need to select every single everything.
03:59But it could be very useful if you want to say, for example,
04:03let's say we want to travel into the article.
04:06So I'm going to go ahead here and create here a dot article.
04:10And I want to say that anything that is inside of the article,
04:14I want to do to it something.
04:16Or even better, I might say, hey, everything that's inside of the article
04:19that also has a span tag, so I'm going to go ahead here and set here a span.
04:24And I'm going to set here another span.
04:27And let me just set here a couple of spans.
04:30Okay, so I set a couple of spans, and we see we have one here
04:38and two inside of this paragraph.
04:40And what I could say is, hey, by the way, anything that is inside of here,
04:43anything inside of the article that contains a span,
04:47let's do stuff to those spans.
04:49And then I could go ahead and say, okay, I want to have a background,
04:52and I want to set this background to be yellow.
04:57And I also want to have a color for my font,
05:00and I'll make sure that it's, let's say, we'll make sure that it's red.
05:04And if I go ahead and save this, now every single span
05:08that is inside of our paragraphs will be highlighted.
05:11Beautiful.
05:12So that is the simplicity and power of basically using the CSS2 attribute,
05:17which is our joker.
05:19That's it.
05:20We're done with our first lecture in this chapter.
05:22And we'll continue in the next lecture exploring more CSS selectors.
05:27Zero to geek.
05:29Learning better is better.