[MUSIC]

So, now you get to start learning CSS.

Who here knows all the CSS selectors?

[LAUGH] Okay, someone yesterday said they, they knew CSS selectors.

I'm like, no you don't.

So, The, the slidedeck is up on my GitHub, and that's estelle.github.com/selectors.

So if you just go to estelle.github, it's actually .io.

My name's Estelle.

There aren't that many people under the age of 90 named Estelle.

There aren't that many Web developers under the age of 90.

So I got my own name, which is kind of cool.

But my GitHub page actually has about 20 tutorials on CSS and HTML5 and JavaScript.

It's all open source.

So feel free to, I keep talking into this thing and I really don't need to.

Feel free to go there and do all the

sessions and move this down here, okay, that's better.

So that's me, but you know who I am, the one thing I wanna point

out is this is my Twitter account, and I'm a Twitter whore, please follow me.

And other than that, that's it for marketing myself.

So what we are going to learn today is what goes here.

[BLANK_AUDIO]

Right?

[BLANK_AUDIO]

That's pretty, you guys, that looks familiar to everyone, right?

No one's lost?

Okay, good.

The thing is, it's not just what a selector

is but we also have pseudo-classes and pseudo elements.

And we're also going to learn attribute selectors, which you may or may not know.

And relational, well relational things.

Does everyone know what the tilde is?

Who?

Okay, I'll do the who knows cuz that's more paws than the who doesn't know.

Who knows what the tilde is?

Okay so you guys are gonna learn a lot today, cuz

you're just like ooh I have no clue what that is.

I don't know why my slide deck is not working.

Okay, so hopefully this slide is familiar to

everyone, we have IDs, classes, and tag names.

And that is about what, 99.8% of developers use and that's all

they use, is IDs which start with the pound sign, classes which start

with the period, or the tag name which you just put the

tag name with spaces in between if you want to do relational selectors.

That's what you guys already know so let's start working on stuff you.

There we go.

If you didn't know you could play with it.

We're not gonna play with it cuz you guys know this, right?

You guys know that if I put a, myID, this probably has an ID of myID.

Make sense?

Okay.

So, one thing I want to point out which has nothing to do

with CSS but has a lot to do with CSS is the selectors API.

So, you might be thinking that CSS is

really cool, I mean, selectors are really cool for

when you're doing CSS, but all the selectors we're

gonna learn today you can learn in your JavaScript.

Who here uses JQuery?

Almost everyone.

So you know how you've been using selectors

in your JQuery to, to target an element?

You don't need to pull in JQuery to do that.

It is native in CSS.

It's called query selector, and query selector all.

So, query selector finds the first one of whatever selector you put in here.

And you don't just have to put an ID selector.

You can put any selector that we're gonna talk about today

in there, and it will find the element that you're looking for.

But first I'd like to return the first one and query

selector with the all here capitalized will find all of them.

So return basically a node list for you, and it's a static node list.

It doesn't update.

If you update your page, like you, you do a var that's

supposed to, stands for child, children equals all new query selector all.

It will get that list now, but it will not update it if you update your dom.

So you have to get it again.

Unlike JQuery.

JQuery is a live node list and will update.

So that's query selector and query selector all.

So don't think of what we're learning today just

for your CSS, think of it also for your JavaScript.

So then we have relational selectors and combinators.

So we have ul li, and ol li, which is just a space.

It means li, er, any li that is either

a descendant of an unordered list or an ordered list.

It doesn't have to be the child.

It can be, you know, like, the great, great, great, great grandchild.

And as you see here when I click on ol li,

everything gets highlighted and this item gets highlighted twice, cuz it is

a child of both the ul or the ol and the ul.

So

it's hit twice.

If I put a, a greater than sign

in there, that is the direct parent/child relationship.

So that means it has to be an li that is the direct child of an ordered list.

And that is why remember when I hit this one right here?

I should probably highlight those on the left, so you can see it.

When I hit this one right here, the a, b, and c get highlighted twice.

And here they only get highlighted once because it's not matching, a, b,

and c because those are not direct

children, they, they're great, they're grandchildren basically.

Then we have the plus which is the

adjacent sibling selector and most people still know

this one because this was in IE6 and we've been using this for a long time.

Which is that, what happens is it basically finds

the element, which is number four, that has a class.

And then, the plus li means, find the element li that

has a class, and then find the li that's immediately after it.

If it doesn't come immediately after it, then don't look any further.

That's the only element I'm looking for.

If the element right after that li is not an li, stop looking.

Whereas the tilde, which is the one that

half the people knew is the general siblimg selector.

And that means find any li that comes after it.

So here we've targeted, li has a class which is number

four, and then tilde li says find all the adjacent sibling selectors.

So it has to have the same parent.

Once you leave the parent and go to the next li, it's going to stop finding them.

So it's basically a parental, you know, it has

to do with what it is a direct child of.

Okay.

I'm not gonna cover CSS 4, but we.

This is for when you want to come back here.

CSS 4 selectors API is not yet implemented so you don't need

to know it right now, but there's a lot of work being done

on it, and it's gonna be pretty cool because we'll be able to

do relations based on attributes and

stuff, and parent, parental relationships, as well.

Okay.

Well in case you were wondering how I did this previous slide, here?

I use the query selector and query selector all to make those changes.

All I did was change a class based on the on the current [INAUDIBLE] that was here.

Okay, so, that was the basic stuff.

Right?

You guys probably knew 90, percent, 90 percent of you inew 99% of that.

This is what we're gonna cover today.

Does all this look familiar to everyone?

[BLANK_AUDIO]

Okay then well then I can just go.

>> [LAUGH] >> So the browser support.

You'll notice that this is Safari 3.0.

Cuz that's the last time that Safari didn't support all of these.

3.0 is before the iPhone.

The iPhone was 3.1 in 2007.

Every other line is completely green.

With those three pretty little red lines, which is IE6, IE7, and IE8.

But notice IE9 is solidly green.

So this is on my, on my blog, and I just, I haven't updated this in years

because ever since IE9 came out, every single

browser supported everything that we're gonna talk about today.

So if you're supporting IE8 still, who here is still supporting IE6, anyone?

I'm so sorry.

>> [LAUGH]

>> But you know what, there's people that have job openings.

>> [LAUGH] >> Just saying.

Oh, I can't get out of this slide today.

Okay, so next is attribute selectors, and for a long time

since IE7, the attribute selector just as an attribute has been supported.

And it's basically any element in CSS can have an attribute.

the, an ID and a class, those are both attributes.

But like the image tag can have the alt

attribute and, in fact, it should have the alt attribute.

Never include an image without the alt attribute.

Your site is no longer accessible if, if you

that image is not accessible if you don't do that.

So here, I did image no space bracket, alt,

and it basically says target every image that has the alter attribute.

No matter what the value of that alt, alt attribute is.

So here we have an accessible image.

And here we have an inaccessible image.

And it matched the top one and not the

bottom one because the top one has the alt attribute.

And then here we have the form space with the type attribute.

So this is any descendant of a form

element that has a type attribute match that.

But it won't match a select, because select, it doesn't have a type attribute.

Oh, the black swan is because there were really cool black swans by the

lake, so we have a little swan swimming across the screen the whole time.

Just to keep those of you who are bored entertained.

Okay.

So IE7 limited support to this page

but IE8 and older understand these.

So we have an attribute that we have attribute with an exact value.

So, on the previous page we just did is the alt attribute present?

Here, it would be is the alt attribute

exactly equal to accessible and it would match this.

That's an exact value.

The quotes.

Does the quote, do the quotes need to be there?

The quotes don't need to be there unless you have a special character in there.

I just keep 'em in there all the time because

you never know what someone's gonna feed it into it.

Is it case sensitive?

It is only case sensitive if the attribute itself is case sensitive.

So if it's like an input type equals type equals

number, because that is HTML, HTML is not necessarily case sensitive.

Please make it all lower case.

But you're not required to make it lower case.

So if it is an actual value in HTML it

is not case sensitive because HTML itself is not case sensitive.

But if it's an ID or a class, or string that you made up, that is case sensitive.

If you're hitting JavaScript, you need to have it in the exact same case.

That, at that point, that actually be, needs to be case sensitive.

So that's how you figure out whether

it's case sensitive, but just do everything lowercase.

For all your attributes and life will be easy and everyone can read your code.

And if you do that, someone here can hire you.

I'm gonna make fun of you for the rest of the meeting, sorry.

[SOUND] Okay.

The pipe means, begins with.

It does?

No, it doesn't.

It means, begins with, followed by a dash, such as a language.

So it doesn't have to begin with, it can be completely equal to.

So like language equals en, language equals English, works fine.

But then you could also have, it

would also match language equals en-us, or en-uk.

So if you wanna have you know, like you're doing languages and

you wanna put the British flag to show that it's in English.

You can target lang lang equals en, or en-uk, or

even if it says en-us or en-uk, that's the pipe.

That's not used that much.

It could be used way more, but back when this was written,

that's, they weren't thinking about all the crazy things we're doing now.

The tilde equals is any space-separated word.

So if you have a sentence, like a title

attribute, is that word located in it at all?

If you have a plural of a word, it won't match it.

For that, if you actually want to do something like

that, you have the star equals, which is any substring.

It could be anywhere, including spaces.

So here we had, equals, pipe equals, and tilde equals.

Those are the older selector attributes.

And this is the CSS3 attribute selectors that

have been added, are the caret equals which is

starts with, the dollar sign equals which is ends

with, and the star equals which is any substring.

And if you know your regular expressions

they should be really, really familiar to you.

The swan is right behind what I want to talk about right now.

>> [LAUGH]

>> Which is that, you can put more than one attribute on a selector.

So, at the bottom, it says, a maybe if

I highlight it, yeah, you can see it that way.

No you can't.

I can really well, but you can't.

It says a, bracket, title, end bracket, bracket open again, href.

So you can put more than one attribute together to,

to be very specific but did everyone get one of these?

If not I have leftovers.

So this is a specificity sheet and the

thing with doing what's on the bottom which is

a title href, is that an attribute selector is

the same as a, weight as a class selector.

So that might be really useful, but

you have to realize that you're adding specificity.

So that would be a, a zero two one two for two class selectors, and one for the A.

The attribute selector, in most of the pseudo-classes that we're going

to talk about today, are all the same weight as a class.

Okay.

So, here just to recap, we have attribute selectors,

just simply is the attribute is that attribute present?

Is it an exact value?

Is it a space-separated word within there?

Is it a, a string followed by a dash, or no, or the actual value.

Does it start with, does it end with, or is it any string within there.

So, what I would like to do with these?

Let me just give you two examples because I didn't give you the examples before.

One of the things I like to do is, I

like to pull out the title attribute when I'm printing.

So I'll be printing something, and no one can

hover over it to see what the title is.

So with my abbreviations and my links, I like to

let them know cuz, I've been trying for years, but when

I print stuff up I just can't go to whatever page

I was, want to go to, it doesn't work that way.

So when I print, I'll put an ABBR title, colon after.

And then the content.

So when you're doing pseudo elements, the content attribute is required.

And here is a useful content attribute of a

property value rather, which is open and close parentheses.

And do you guys know that CSS can pull out stuff from your HTML?

So

in this case right here, and I'm gonna, should I walk over here?

I can walk over here.

>> And I can echo off.

No, I cannot walk over here.

Okay.

So, I'll just point to things on my computer.

I apologize.

So here, CSS can actually pull out the the value of your attributes.

So, you put attribute.

And you say which attribute you, you want.

And it could pull out that text.

So a lot of people, if you're using a dataset API,

you could actually pull out data dash whatever as the attribute.

So you can put tons of stuff in your HTML.

Don't overdo it.

Be logical.

But you can actually pull out stuff from your

HTML and make your CSS printed with generated content.

Okay, that was a side note.

And again I cannot move my slides.

There we go.

So, using attribute selectors.

The top one, it says, li.has a title, make it purple and bold.

Any link that has an href, put an over-line under, on it.

So, what can we do?

We can say title that starts with

unicorn.

And

you see the top one is, they're both purple and then I add an

s and then the bottom one did not start with unicorns, it started with unicorn.

Just to show the

the tilde, unicorn is an exact match.

Unicorns is not a space-separated word, there's an S at the end.

If I had done starts with, that would have been good, or if I had done also

just the star which means, you know, the sub-string anywhere that matches as well.

So let's look at the href as well.

If I do href starts with http that's kind of like an external link, right?

I could be more specific, I could do a

href starts with http:// Comma, a href, starts with https://.

but, unfortunately, you know, you can't make that into one.

So, to me, this is good enough cuz I never

name any of my folders http because that's just dumb.

Oh.

Did I say that?

Okay.

So doing that.

And then the other thing that's really cool is you can do endswith PDF.

And so what I like to use that with

is I'll put a background image, like an icon of

a PDF file, and put like padding of 20 pixels

on the right, and just put a little icon there.

You can even do it with generated content.

You know, you could say generated content, stick a foreground image

in, or preferably just put padding in a background image on it.

Any questions so far?

Okay.

So those are attribute selectors, and in CSS4,

not supported yet, we will have case insensitivity.

Okay, this is not in the CSS3 spec for selectors.

It's in the CSS3 UI specifications, but

they've put it into CSS4's selector specification.

And it's been supported for eons, it's just that

browsers weren't supporting forms that well, and now they are.

So we can use this now.

And this is one of those things where, just because IEs 8

and 9 don't support HTML5 web forms, doesn't mean you can't use this.

Use it, it's enhancement.

So here we have pseu, a few pseudo-classes, which is

enable, disable, checked, and indeterminate which is a level 4 CSS.

So checked would mean, is this box checked?

Can anyone try to read this to me, what this says?

Anyone wanna take a guess at what that reads?

You guys should all know this now, okay.

>> Select any checkbox input type that is checked,

will select the label that is directly after it checked.

>> Exactly.

It says dir, check the label that follows a checked

checkbox, not a checked radio button, but just a checked checkbox.

And make it red.

So if I check this

for those who are colorblind that just turned red.

And because I have a label attribute when I check it,

when I just click on it, it toggles on and off.

So include your labels when you do forms.

This is just progressive enhancement, it's like, if

it didn't change red, it's still readable, right?

So, there's no reason not to use this stuff.

So that's some of the cool stuff you can do with selectors.

And again, I can't move forward, there I can.

Okay, so, those aren't the only UI.

We have valid, Invalid, required optional, in range,

out of range, read only, read write, and default.

So default, no one knows what it means, I know what it means, so I'm gonna tell you.

Its not that exciting.

But it's so random, I still haven't figure out

how to use it, its just the default value.

So, if you started with 16 radio buttons and one of them was, by default,

checked, you could actually, even though that

is no longer checked, it's still the default.

And in the select, that works as well but you can't style a select so eh, okay.

So these two boxes right here, I basically

said, if it's valid, make the border green.

If it's invalid make the border red.

If it's required make the border five pixels wide.

If it's optional make the border 10 pixels wide.

If it's in range, if it's out of range make it pink.

If it's in range make it light green.

So here a number, and because some people don't know a HTML5.

I put what I I put the HTML below it which is input

type equals number, minimum equals zero step equals 0.1 and maximum equals ten.

So if I put the number six in here we're all good but

if I put the number 60 in here we are no longer good.

No reason not to use this.

No reason not to use the HTML5 form, forms either.

If you're in IE6, this will still show up as an input type, right?

And that's what you wanted.

However, if you are on an Android device or an iPhone or any other.

You know, a TV probably too.

And you have a popup keyboard, it'll show you the number keyboard.

That's an enhancement.

It doesn't take away from the, you know IE6 still works fine with this.

So use all of these.

They're enhancements.

And this is a,

showing up.

It's the exact same thing, but you can play with it.

So you can, you know, if you want to come back

to this, you can just, you know, make it blue or whatever.

Okay.

So these are the, the next I wanted to hit is the structural selectors.

Again, structural selectors have the same weight as a class.

And so did these UI pseudo-classes.

All have the same weight as a class.

So structural selectors are, when you have your HTML, and you

want to target an element, and you don't have access to

your HTML, you can pretty much target any element on the

page without a class or an ID by using the structural selectors.

So who here has done a table with class odd and even?

Don't do that ever again.

We're going to show you how to not do that.

Structural selectors, it's basically when you do odd and even and you

do a sort you have to re-add all the odds and evens.

With using structural selectors you don't have to

re-do anything because it just says, make the first

red, make the second white, make the third

red, make the fourth white, and just go on.

And when you change the order, it just automatically

resets it, cuz the first should always be red.

All the even should be red, or odds should be red, whatever.

So we have lots of structural selectors.

We have nth child nth last child.

You can all read.

We have few special ones like first child.

And first child has a little red star, cuz it's actually supported in IE8.

The other ones are started in IE9.

So I thought the best way to explain this is to start

with first child, last child, first of type, last of type, only child

only of type.

I prefer to do it by example.

So, I'm gonna actually open this in a new window.

And then.

It showed up.

Okay.

So this is a beautiful page.

I spent many, many hours doing the CSS for this.

And what it does is it makes everything blue.

And, if I do last of type.

It's all blue.

If I do first of type, it's all blue.

Anyone know why?

[CROSSTALK] It's a body tag.

So the body tag is the first of it's type and it's the last type of it's type.

But it is not the first child.

So the first child doesn't target everything, it

just targets the first child of any parent.

Because I didn't specify anything here, right?

So its targeting those grey boxes are just divs, and then inside it

says whether it's a paragraph or an h1 or an h2 or h3.

Just assume everything that's not an h1, h2, or h3 is actually a paragraph.

So target the first div so everything inherited the color.

Here this is the second div but I targeted the first child right?

So this, this div is the first child of the body.

This H1 is the first child of the div and if we

were to go down the page it would hit every first one.

If I did first of type, let me just put a body in there.

So I'm talking about children, you know, anything in the page.

This h2 got highlighted.

Why did this h2 get highlighted, when it wasn't highlighted before?

Because before it was first child.

And now it's first of type.

I

could do last of type.

And here it did the last paragraph, not the first paragraph.

And which is often similar to the last child.

But notice the h1, cuz I'm actually doing of type, rather.

I mean I'm doing child rather than of type here.

So, now I just need to make sure that I hit everything I want to hit.

Oh, only child.

I forgot

that.

M'kay, so, if I do only child, there's only

one thing that is gonna get hit and that's

the last one cuz the, that h1 that is

on the bottom, that hopefully you people can read.

Wow, that's way bluer on your screen than it is on mine.

I actually have this really pretty color blue over here.

You guys have regular blue colors over on the screen.

That is the only element that is the only child of

its parent, but had I done only of type, much more

would hit because this one has only one h1 but it

has more than one paragraph, it has a few paragraphs, right?

In this box here there is only one h1.

In this box here, there's an h, only one h1, only one h2, and only one h3.

But, there's several paragraphs.

And that is why.

Do you guys wanna know how I did this?

Like all the JavaScript that I used for this page?

All I did was I declared the head as, as visible.

And then, I hid everything in the head, except for the

last style sheet, and then, I made the style sheet content editable.

And so, I'm editing the actual style.

If you do a view source.

I like to go off-topic cuz going off-topic is fun.

If you do the view page source, this is what I'm editing on the fly right

there oh, right there, right that's what the

page looked like when I first loaded the page.

And so I'm just, it says content editable,

which is an attribute supported ever since IE5.

Use it, it's fun.

And it changes, it updates the dom and then we go back to normal size.

Okay.

Okay.

We're good.

People understand of type versus child?

Any questions?

Yes.

>> Is there any way currently using CSS to select the

first class of what's on the page and not the first element?

You know what I'm saying?

>> I'm gonna try answering that question by

actually typing it in here which would be.

[BLANK_AUDIO]

You could do that.

>> Okay.

>> So, the question was is there anyway to target the first class.

And this would be find the first element with a class selector, right?

And this wouldn't actually work for the whole

page, this would just work based on its parent.

>> Uh-huh.

>> So, so far, like there's no way to target throughout the whole page.

The difference between the JQuery first, and the first child is

in CSS, the first child is the first child of any parent.

And the first colon in JQuery I believe is actually the first one on the page.

It stops looking after that.

So it, it does, it doesn't have that parental relationship if I.

Don't, like, don't quote me on that.

But, like, when you realize that you have a bug.

I'm not a JQuery person.

I love JQuery, I think it's awesome, but I prefer to hand code.

So I don't actually use, JQuery, if I can avoid it.

But that might be confusing for people when they hit JQuery.

Okay, so then, we get a little bit more complicated.

But a little bit more powerful which is we can create our own equation, right?

So far we just had first and last and only.

Right?

That's kinda limiting.

You can say I just want the 27th.

I want every third one, I want every third one but I want to start with number eight.

You can do all of that with CSS.

Because we have the nth of type, or nth child, pseudo-classes.

And also last of, so you can start from the bottom instead of from the top.

So 3n, which would be every third.

Odd, anyone know what that means?

Just kidding.

So we have two keywords odd and even, and then we

have this equation called which is the equation an plus b.

B is the offset

a is the, not multiplier, what is the word for that.

>> Coefficient.

>> Coefficient maybe, we don't know we don't

remember math so we're just going to believe him.

But, you know, it's a multiplier basically.

So you can put any number there.

If you put 5n+4 it'll be, start with the fourth and

then the ninth, and then the fourteenth, and then the nineteenth.

I [UNKNOWN] pick five cuz that's easy to add.

Okay, So here's an example.

We have first child and last child, and they're bold.

So, first child and last child will be the first and last one.

And so we see that item number 1 and item 10 are both bold.

And then, we have first of type, last of

type, which happen in this case because these are li's.

And therefore, they're the only elements inside a ul, or, in this case yeah a ul.

They're both have a line through them.

Then we have every even one has a background color of grey.

Check.

Two, four, six, eight, ten, they're all background grey.

Oops, I said I won't move my sweatshirt, sorry about that.

odd.

Are white, I don't think I actually put that in the

CSS cuz I had the white background, but maybe I did.

I don't know.

Then three.

I only put the offset, so a is basically equal to zero, right?

So 270 times 0 is what?

Zero.

I have second grader she's learning this in math.

It's really hard you know?

So, it will only hit third one.

So, here we look the third one, the color is grey and hard to read.

And we have four n, and it's that blue that to you, to me

looks really pretty and to you guys looks like the regular blue link color.

So it's every fourth one.

And if you see item 4 and item 8 are blue.

And then we have nth of type 3n minus 1.

So what the heck does that mean?

So we first make n zero.

The value is negative one.

So it doesn't matter.

That's, that's not shown.

Then we make n1 three times 1 minus 1 is 2.

Then we make n2 3 times 2 minus 1 is 5.

And now I'm getting into algebra and I'm confusing

everyone but what that really means that number 2, 5,

8, and 11 would be right aligned and as we see here 2, 5, and 8 are right aligned.

Is this making sense to everyone?

The equation?

You're all Good?

Okay.

So that leads to this which is now possible in Flexbox but

this was really cool like five months ago before Flexbox was everywhere.

Which is one of the things we could never figure

out in just CSS was how many rows do we have?

Or how many elements do we have?

And if you have one, make it 100% wide.

If you have two, make it 50% wide.

If you have three, make it 33% wide.

If you have four, you make it 25% wide.

Totally doable in CSS before Flexbox, right?

Except for IE8 and 7 and 6.

So how do you do it?

You do li only of type, making the width 100%.

And the top one is 100% wide, right?

Then we do li nth of type 1, which means the

first one from the top, which is also the last of

its type, number two, which is the second from the bottom,

which means there's exactly two elements, then make the width 50%.

And then you do the other one, which is nth of type two,

which is the second from the top and the first one from the bottom.

So it has to match both of those things, which means there's

only two elements and there's the second one, make that width 50%.

I'm gonna skip the third one cuz we don't have all day.

But the fourth one does the exact same thing.

The fourth one says, if it's the first, and also the

fourth from the end, which means there's exactly four items, right?

Make it 25%.

Kinda cool.

But now we have Flexbox, so.

But I thought this was really neat when, you know?

That's one way to basically target, it gets a little bit

unwieldy after five elements cuz, you know, you have to write five.

You know, basically it's one, two, three, four

I know there is an expression for that when you add one and then

you add two and then you add three and I for, what is it?

>> Factorial?

>> Factorial, perhaps.

Everyone agree with him?

I'm really old, I took calculus in 1984.

Half of you weren't born.

Right?

Yeah, okay.

I don't remember anything.

So then we have structural selectors.

No, it was 1985.

No, that was 1984.

Okay.

I'm so old, I don't even remember, that's so cool.

Okay, so how do we play with this?

So, I'm gonna play with this up here, cuz

not all of you have computers, and those of you

who do have computers might not have much internet

access, though the WiFi's doing really well here, so kudos.

So, here, what I did, is I said, this is just a table and it has cells in it.

Right.

Woo hoo!

So exciting.

You shouldn't be designing your web pages like this, but it's just to prove a point.

So here I did nth of type even, tr nth of type even.

Which is every even row, every even cell in that row

make it, every odd row, every odd cell make it red.

And that's what happened here, right?

And make the text white, but I

could also make it more stripey,

3n, 3n, 3n plus 1, 3n

plus 1, and then 2, 2.

See kind of cool?

So this is just to say you can really figure

out what you want to do and target any element.

And if I wanted to skip the first row, I could do this probably.

no, it would be.

[BLANK_AUDIO]

Okay, this is why I don't shift my code, and we were talking about this earlier.

It would be, okay, I'm just not gonna do it.

Okay.

But it's doable, just my brain is just not an option today.

So when it decides to load, cuz I, I complimented the WiFi, right?

You guys remember me complimenting the WiFi.

This page is not loading.

And that's why I have this.

Everyone who has epilepsy, please close your eyes.

[SOUND] There we go.

It's called a local copy.

Okay.

So here's the U.S. flag done with selectors.

If you look at the code, it's the exact same as the page before.

Do you want proof of that?

View page source.

It's just a table with cells.

The word cell in it.

Table, cells.

Don't show this code to your, to your boss cuz it's bad.

Okay, but what I did is, I said, and this is the hard version.

Cuz I did an easier version and I did a hard version.

This was just to show the power of selectors cuz

it's way, there's a much easier way to do this.

But I said, make the whole thing white.

Just every td and every background color, just make the whole thing white.

Get rid of that text so no one sees it.

And then I said tr nth of type odd, which meant every odd row, right?

Find the eighth cell.

And then, tilde.

What does tilde mean everyone?

Adjacent sibling, find the td that comes after it.

All the tds that come after it.

So what that part did, and and then make those red.

And then start with td, t, start with the row 2n plus 9.

So start with the ninth

row and everyone there after so 9, 11 and 13, make every td red.

And so here I have found the eight one, eight cell

was right here and then I made it red, red afterwards.

I could have just made the whole thing red like every other

row but that wouldn't have been fun, that would've been too easy.

So then I want to do the blue.

And the blue I'd said nth last of type, type n plus 7.

So go to the, start at the end, go seven in, and then make those blue.

And then I did the stars which is the exact same

thing as, you know, this right here and this right here.

Say the exact same thing right?

Generate content, so after put a little star.

In terms of Unicode character the star is 2605 and that's just the content.

When you do CSS and you want to do Unicode you can declare UTF8 and actually just

put the star in there or you can put the slash and put 2605 which is the code.

The slash is basically, you know how you put

the ampersand in HTML, and slash u in, in JavaScript.

You just put the slash in CSS, and then I moved every odd

one over, every odd star over by 14 pixels to make them offset.

So, if anyone was paying attention, this is actually

not the American flag, cuz there are not fifty stars.

There's like forty-eight, but it's good enough for this demo.

Okay, so let's close out that window.

Oh, it loaded.

Okay so, the internet is working, just takes a little bit longer.

Or, yeah, okay.

And this, if you want to take a look at it, just a simpler version.

In CSS level four we're gonna have more stuff, we're gonna have matches, selector.

But we're not there yet so I'm not gonna cover that.

But if you wanna come back to this when your

browser, when browsers actually support this I can show an example.

And it, there will be an example in here at that time.

But right now it's not supported.

So not.

Not is one of my favorite things.

Which is, match all of this stuff and then don't match these things.

So it first pulls out all the divs here.

[SOUND] Sorry.

It first matches all the divs, and then it,

it takes out the ones that say, exclude me.

So it's not like it goes through, so if you were gonna do nth of type

2, like, or odd, it would first find

all the odd ones, and then exclude the exclusions.

So div, so it's e colon not parentheses, and a simple selector in there.

So by simply selector most of the stuff that we've

covered, like all of those nth last of type.

2n plus 7, that's a simple selector.

What they mean by simple selector is no relational.

So you can't put like child of something, or, you know [UNKNOWN] descendant

relationship but any pseudo-class or attribute

selector or ID or whatever is fine.

In terms of specificity this is an exception.

So remember when I said every pseudo-class has the

same weight as a class The not has no weight.

Okay, I'm going to move this because it's just not working.

>> Flip it up so that the [INAUDIBLE]

>> I should not wear very a light cotton t-shirt when I talk.

That's mainly the issue.

Okay, I'm gonna put it back on my sweatshirt.

And try not to move, I'm just gonna like, pretend

I'm Bob Dole and not move my left arm, okay.

That was so wrong, take that out of the video.

Okay, so the not in terms of the specificity

has no weight, but the selector inside it does.

So if you put an ID selector in there you're talking about the weight of an ID.

You can put an ID, there's nothing wrong with doing that.

Well there is, when you're using selectors try to be as,

as non specific as possible cuz that makes it easier to overwrite.

Who here uses Sass?

Next year everyone's hands up, okay?

The only thing is when you're using Sass you can nest 2,712 times.

It will let you do that.

Don't.

Limit to about three or four or two.

Don't keep nesting because your specificity just

goes crazy and then you can't fix anything.

So, the weight of, of the exclusion counts not the not, not the not, okay.

Oh, and then, in CSS4, we'll actually be able to

put a comma in there, and say not a few things.

Okay.

And we don't have this yet, so that's also CSS4.

Then there's the empty pseudo-class.

Anyone here ever use empty?

Yes, what'd you use Empty for?

>> A slider in [INAUDIBLE] >> Okay, so the slide he just did

styles the sections differently whether it's empty, whether it has content.

The, which is similar the only thing which I've

ever used it for, which is WordPress, p empty display

none because I, the less I hate having, like

it just creates like 44 empty ps for some reason.

So it should match

anything that touches, has a comment or that is actually empty and that's it.

In CSS4 I think that it will actually match

if it just has white space, but I'm not sure.

Oh, blank, yes, exactly, okay.

So in CSS4 we'll have blank.

Okay, can we have the links to the classes.

Link visited, anyone need help on this?

Okay, one thing to note with this is that it

used to support everything and when Safari 5 came out

or maybe it was 5.1, I think it was 5,

it didn't support it completely and I was like, what?

Oh my god, they broke the build.

And no it's a security feature.

People could basically scrape and see what styles

they could apply to your links and then

say, oh, you've visited Bank of America and

I grabbed your you know, password just now.

So let me check if that's the same password.

So link and visited don't support all of you know CSS like other things do.

And CSS 4 will have any-link, local-and local link(n) which will let us,

you know, which will let you, based on the hierarchy in the page,

whether it's local or not local, and whether it's, in this current directory,

or like 15 directories down you'll be able to target based on that.

Oh, that's CSS4, so I'm not doing that.

Then we have hover, active, and focus.

Anyone need help with that?

No.

Okay.

One thing to notice, which is focus and active.

Don't remove the little dots around your elements.

Your designers, you know, they'll l say, I hate those little dots that are coming up.

You can remove the dots but replace them

with something else because some people use keyboards.

And when I ke, key through a page, I wanna know what link I'm on, you know?

That's my lecture for today.

And CSS4 will also have drag and drop pseudo-classes.

These are not yet supported.

Then, there's the other pseudo-class which is target.

And we're gonna have scope.

And I just, I passed through this page real fast,

because I'm going to talk about it on this page.

This is Chris Coyer's example, target is awesome.

Let me open in the new tab, so I can actually show you right there.

[BLANK_AUDIO]

Let me open this in this page, so it goes faster.

[BLANK_AUDIO]

Okay.

One more page, and open this.

[BLANK_AUDIO]

Okay, here we are.

This I'm supposed to open and control.

I'm gonna open a new window because obviously this is just failing me.

Okay, so here if you see it says files 07 target.

That is the name, right?

There's nothing after here.

And as you see here the tabs are all gray.

So what does target mean?

Target means when you have the pound sign and tab

three or something like that an anchor link on the page.

So here it says section not the target if the direct child a, you know.

If, if your a is a direct child of a section, but not the

section that is the current target, make the background color C CCC, or grey.

If your a is a direct child of a section that is

the target, make the background color white, and the border bottom white.

And then if your div is a direct child of, of a section

that is not the target, give it a z index of negative two.

But if your div is a direct child of the section that is the target,

give it a z index of negative one, so put it higher, closer to you.

When I click on this tab here, notice that turned white and text changed right?

And notice this one right up here, oop, of course it hid what I wanted to show you.

Tab two, right?

That's the target of the page.

[BLANK_AUDIO]

There's no JavaScript on this page, you can do what you just imported a

huge JavaScript library, well it's actually kind

of small, but it's still a JavaScript library.

And if you're importing on a mobile device,

right, it has to download it, might have it

cached, but even if it has it cached it still has to par, parse it and execute it.

Right?

So don't add a framework just to do stuff you

can do, like, odd and even, or first use CSS.

Oops, there we go.

Okay, so that's target.

Then we have the language pseudo-class.

And we're going to basically, language, and you can put whatever language.

And then CSS Selectors 4 we'll be able to be

more specific with language and sub-languages and direction as well.

Right now you can use the direction

attribute but it's just basically on that element.

So, you can say does this element have the dir attribute?

In CSS4 you'll be able to say does this

page, does this paragraph inherit from some other thing?

So is this left-to-right or right-to-left?

So that's gonna be fairly cool for internass, internationalization.

So root in HTML, colon root, is the H, usually the HTML element.

So why do we have this?

One, it's a great way to hack against IE8, IE7, and IE6, cuz you can just put it in.

But that does add specificity.

But the main reason that I use it is, that is where I declare my

rem units, or my font size for the page that I can use my rem units.

Do people know what a rem unit is?

Anyone not know?

Give me quizzical looks or something.

Okay, who knows what a rem unit is?

Not everyone, okay.

So, a rem unit is a a root em unit, or a relative em unit.

It's, it's, it's relative to the root, em size.

So, you know how when you do em 0.8.

And then you accidentally nest a 0.8 inside a 0.8.

You've got 0.64.

And that just gets smaller and smaller until you can't see anything any more.

Or bigger and bigger, if you did 1.2 and 1.2.

I can't do math up.

I can only do it down.

You've got a problem.

So, rems instead of staying relative to the thing

that it inherited from, it inherits just from root.

So if you declare 16 pixels on root, which is the default for most browsers then,

when you say one rem, it'll be 16 pixels.

If you say 0.75, it will be 12 pixels.

And then if someone increases the font of

their page, everything increases at the same rate.

So you could actually control it much better than an em unit.

So it's the way to go.

And it's been supported since IE9, I believe.

The other use for root is, in the future we're going to have variables in CSS.

We actually have a lot of browsers already supporting that.

You would declare the variables on the root.

And I can't go too deep into that because

I haven't actually played with calc in a long time.

Or variables.

Okay.

So, specificity I kinda covered it but just let me cover a few more things.

It's specifishity in this case but the picture

says specificity cuz that's a really really old picture.

Or no, actually, my website is broken with that.

so, specificity, what I want to point out is the less obvious on the sheet.

You can put this on your desk and there's

two things to note about this, well, a few things.

The star, I always thought the star was

like an element, it actually has no value whatsoever.

I didn't, like, when I was doing this sheet, that's when I discovered that.

No matter how many elements you have, text selectors,

it will always be less weight than a single class.

Those greater than, the tilde, and the plus has no added weight.

It might make your selector more specific but it

doesn't add to the specificity in terms of weight.

[SOUND] I already said that all of the

attribute selectors and pseudo-classes are the same as a class.

And what I didn't say is that I was a little bit political.

So I used plankton, which is kinda non political, and fish and shark.

But then I used a BP oil tanker for style.

I could have used any boat, cuz a boat can kinda kill a shark, right?

But the BP oil tanker's just a, it doesn't have good memories for us.

Don't use style.

Style is for your JavaScript.

And you know what, you shouldn't even be putting style in with your JavaScript,

what you really should be doing is

changing classes with your, with your JavaScript.

So, the only time you should have style in the inspector is when the inspector puts

it in there because you've added it with

JavaScript, but even then try doing class change instead.

And then important, I just put a bomb, the nuclear bomb,

cuz we all think nuclear bombs are really good ideas, right?

No we don't.

So important I use it.

I do use important.

I use it when I am completely screwed and I can't figure out why I can't target an

element you know cuz I put 16 divs IDs on it and 14 classes

and just nothing and then I realized that I was styling an li It looked like an

a, because someone had styled all my lis to look like as or something like that.

Or my spans cross-link.

And looked to me like an a.

And I'm, like, why can't I make this a red?

Because it wasn't an a.

So use, use the elements for what they were intended.

If it's a link, use a.

If it's not a link, don't use a.

If it's not a link, don't make it look like a link.

I got off track again.

So important help, helps me find out that I'm actually not targeting, I should

be targeting an li instead of an a, or a span instead of an a.

And then I take it out, I do not put it into production.

And the person at

at iFreelance, at a company and, they had a lot

of importants, and it was, the guy was out the door.

He's like, I don't care.

And I'm like but I do, be nice to me, you like me, don't you?

So I told him I would have fired him if he wasn't quitting.

I don't have the power to fire him, but I told him I would have fired him anyway.

So, combinators like tilde, greater than, and plus, have no value.

Not, I already went into this, has no value, but the parameter does.

And specificity is not inheritance.

Just because something is very specific doesn't

mean that the child necessarily inherits it.

There's inheritance rules.

I mean, you know, like when you inherit from your

parent sometimes, but other times, on some properties you don't.

Like background image, the nested elements

don't inherit from its background image, cuz

then you'd have a background image nesting,

but color does inherit in many places.

Then we have pseudo elements.

And, four more minutes?

I've no clue, I'm on California time, I don't know when this is over.

Okay, I'm just gonna keep going.

Pseudo elements.

First line, first letter, selection, which is not in the specification.

Before and after.

Selection is not in the specification.

Not because not every browser supports it.

Last time I checked you still had to write the [UNKNOWN] prefix.

The reason it's not in the in the specifications is because they're

still specifying it and they didn't want to hold up the selectors specification.

So they pulled it just so that they couldn't finalize selectors.

So it, it is basically supported.

So notice that there's two colons right here.

That is the correct way of writing pseudo elements.

Not the one colon, but IE, older IEs, IE8

supports all of these, but only with a single colon.

So in practice you'd most likely just write one colon, but that's the

way you know you're dealing with a pseudo element instead of a pseudo-class.

Pseudo elements have the value zero zero one.

But so, you know, the weight is low but the specificity this, but your it's

actually, there's no other element that's targeting that

cuz it's basically creating an element for you.

So, really all is targets, targets it really well.

Okay.

so, I've used pseudo-classes.

As, those are elements that already exist on your page.

Pseudo elements are kind of like creating

these faux tags around things, like the first

line tag around your first line, or your first letter tag around your first letter.

It's not there, but you can pretend in your mind

that it is, and then selection, oh, I'll get to it.

So it's kind of like faux elements.

So we have faux, first letter here.

Anyone know why I would do first of type first letter?

I hear we have designers in here.

It's a design question.

Cuz it would be really ugly.

So, yes first letter will do every single one, but

that's ugly.

I mean, it's ugly anyway.

What I had originally was ugly.

But that makes it uglier.

So basically, it's as if you put a faux, like, first letter around that y.

It doesn't need to know which letter it is.

It's just whatever the first letter is of that element.

It will do whatever you want to it.

You can style it completely

before you couldn't add animation to it but I

believe now browsers are supporting animation on pseudo elements.

I haven't tried cuz you should be shot if

you're animating the first character, you should be shot

if you're putting a swan on the page that

keeps just floating around and covers your thing up.

>> [LAUGH]

>> Okay, then if, after the first letter we also have selection.

And this is selection.

Remember I was selecting text before and it did not do this?

That's because there's actually a selection on this page.

So I just selected this text and turned bright red.

Or hideous red.

Or, whatev, brown?

Because I said this slide star selection.

And I gave it a color.

So you can style whatever is being selected by the user.

And HTML5, who here uses HTML5 boilerplate?

[BLANK_AUDIO]

That's it?

Read HTML5 boilerplate, the notes.

You'll learn so much.

But they'd made their selection hot pink, so

they can just see who's using it without

actually, like, do you know what you're doing,

or are you just putting this in there?

You can disable selection.

And this is the one place where I talk about properties and values.

Because sometimes, you don't want things to be selected

if you're on a mobile device and you're playing a

game and you don't, when they little element for

a really long time, cuz you're not using Web GO.

Or Canvas.

It'll say, do you want to save this picture,

and you're like, no actually I want to flip it.

You can do webkit tap highlight color.

You can do webkit users select.

And, you can do webkit touch callout.

And there's also one for MS, and, and basically

that makes it so that it doesn't say save.

So don't mess with this stuff unless you're doing a game.

Cuz you really should keep the highlight

colors so people know what they're highlighting.

Before and after is generated content.

So here I have this paragraph that says the content.

And before I put before content with a dash, and I make it bold.

And then after I do after content and I make it bold.

So here we have the paragraph, and if I

try highlighting this you see I can't highlight everything.

Oh, here, I can, because it's actually highlighted in the page.

But if I just grab here, and go up.

I'm trying to highlight it.

It won't highlight the actual content.

Because the generate content, okay, is not part of the div.

so, it's basically, when I was talking about faux elements, it's if you wrote

a before and an after and you can style those as much as you want.

So we're not gonna play with this, but there's some IE10 specific values.

There's a shadow DOM you can actually style like progress bar, except for,

so far he's kinda pulling it out because Chrome kinda pulled out you know.

There's a whole fight, but you can still style some of those.

this, people are like but I still support IE6, sorry over there.

You can use most of this with IE6, there's

Selectivizer, which if you use Selectivizer plus any library,

and there's a few others that do this too,

but it makes older processors support most of this.

You have to look at the creative support.

And just remember that, don't pull in a

JQuery just so you can do a query selector.

Because you can just do a query selector, right?

And that's it for my talk.