CSS Tutorial — Selectors, Element, Class and ID (3/13)

CSS Tutorial — Selectors, Element, Class and ID (3/13)

So we just looked at a basic CSS statement and it starts with a selector. So what the hell are selectors, again?

Say you are brangelina, and you have a bunch of kids, you wanna dress them for school except only one of them is old enough for school. So first you have to pick the right kid, then dress/style them. That’s what selectors are. Choose which kid you wanna prepare for school. Or since you’re not brangelina, Choose which element you wanna style. It all starts with the selector.

There are different kinds of selectors. In our example, we used what’s called an element selector because it targets your styles based on the element type, That’s the most basic selector there is. By using the element type. Like a p tag. Cool? Cool.

The problem with element selectors is that you might not want to turn ALL your paragraphs blue. What if you had 3 paragraphs and you only want one of them to be blue? The element type is an identifier but in this case it’s too general.

I wanna show you an example. Look at this thing on atom’s website. See these two sections? One of them has a white background, the other one is beige. If you inspect it you’ll see they’re both divs, here they are, so clearly the dudes who made this couldn’t have said oh select all divs and change the background to white or beige. They needed to be more specific.

You can select elements based on other kinds of identifiers. Classes and ID. Class is the most common and useful one, in fact that’s exactly what Atom is using. Take a look. They have wrapper class on one, and highlight on the other. If you click on highlight, you’ll see that class has a beige background on it.

So let’s do one ourselves. Let’s say you have 4 paragraphs and you want to alternate between dark and light. So dark, light, dark, light. In other words you wanna reuse a style for multiple elements. In this case you can use a CLASS selector. The way you write these in CSS is you write the name of your class, this could be whatever you want, just can’t have spaces and some special characters, say DARK, and you put a DOT in front of it. Why a DOT? Well, I dunno what to tell you. There’s no good explanation why, that at least I know about. It’s just syntax that you have to remember. This tells the browser hey this is a CLASS selector. Then of course you have to add the class to your element in HTML.

This means “hey select all the elements that have a class attribute and the value is dark. Let’s try it:

DEMO 4 -

I’m gonna cover ID selectors too just for the sake of it although we don’t use them much. ID attributes are specific to one element only. If you have a style that you want to apply to only one element, for some reason, you can add an ID to that element (for example: my-blue-paragraph), then use an ID selector in CSS to style it. ID selectors are just like CLASS selectors, except you put a # in front of the name instead of the DOT. That becomes the CSS selector for the element with that ID. So let’s try it.

DEMO 3 -

The problem with ID is that it’s limited to only 1 element. Remember IDs can’t be shared between elements. So you can’t reuse my-blue-paragraph ID for multiple elements.

So those are the 3 basic selectors. Element, Class and ID. “Element” to style the elements of that type. ID to target only one specific element. And Class to reuse for multiple elements. We’ll be using all of them from now on. Selectors can get much much more complicated and they will, but now you know the basics.

So next, we’re gonna look at some of our options when it comes to style properties, like color, so far that’s all we’ve used so I’m gonna talk about it in detail. Later, fonts, sizes, background, border, animations, display types, flexbox, where’d everyone go? I was talking.

[florinamartinez]

I am a visual learner, so your channel is going to save my life this semester! Awesome video!

[reidwilliamson]

I wish all the other coding youtubers were as laid back and easy to understand as you. Blessings

[r.sriram]

What my teacher failed to convey in 2 months, you did in 6 minutes! My practical exams are in 45 mins, wish me luck bro!

[warrenresearchinc.]

Great refresher if you are running into a airhead moment when its been a while since diving deep into CSS.

Doing some deep customization for a client and I was running into a simple way to explain how this worked verbally. I was totally having a 🤪 moment and needed more coffee.

[TheKetoSurvivor]

Dude! Great presentation. Great graphics (not overbearing). Great subtle and humor and metaphors. Great pacing (not speaking to me like I'm a 4 yr old all slow and simple. Thank you for not taking me through a trip to file linking land, a review of such, or 5 minutes of self-promotion}. Now I just need to look at your channel to see if you got anything that uses combonations of selectors and psudos.

[cherl]

Ahhhh! Finally someone who helps me understand.. 😀😀😀

[xchemicalXladybugx]

Of all the videos and channels I used in school this is by far the best. Thanks so much, I really love the simplicity and graphics as well as the use of an actual website.

[YahyaZekry]

THANK YOU, I was so confused about Classes and Ids

[layanmawri]

Your way of explaining is a masterpiece.

[gugacorchog]

You are the only one explaining how to separate Class. thanks.

[kosonamam]

Thank you man, you made my day. I have been looking for this answer for awhile. Now I've found it. Cheers

[drewskii]

Started off with a simple and funny hook and gave great visuals, awesome video man!

[abggirma]

Oh my God! it is clear the blue sky
man!!!

[alexq]

Funny. More enjoyable than other tutorials and still learning! Thanks for posting.

[hamedriahizadeh]

that was fantastic!!!!
clear and comprehensive
thanks amillion

[studiodeconcept]

Great explanation and not overcomplicating matters!

[sergerudasingwa]

Thanks, now i can understand selectors and what they do. Keep it up!!!

[drawdownwind]

Thanks bro, really helpful.... *I enjoyed your mafiosi type hand gestures, while you talked about Brangelina xx

[destineevalenzuela]

THANK YOU! I am taking the product design program through bloc.io and these videos are so so so helpful.

[liamthomson]

This is very helpful. Thank you for making it so clear to understand!