Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Selectors demo
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Now let's play with CSS selectors and see them in action. We'll come back to our designable web app that we've been playing with
0:08
and we'll continue to use through this whole section, this whole chapter and let's fire it up.
0:16
So, we have a special CSS selectors page and it's just a little HTML form with a little bit of fancy JavaScript that I created
0:24
and we are just going to use that JavaScript to explore selectors. So notice there is an entry box up here, we can out any arbitrary CSS selector,
0:32
and this little dialogue here gives us some tips on the things that we can involve in our search, so we have a table,
0:39
we have things like table tr, td, th, we have a body and lots of divs, we have a few things with names, these are jumpstart Pythonic and launch
0:48
and we have some classes that apply to things in our table, like course-img that is actually above but this_month as a class
0:56
and the latest episode as an id. So we'll come back to this, and notice from this little divider on down,
1:02
this is just a static snapshot of the episode page of my Python podcast at talkpython.fm.
1:10
In here I added a few things, we can just play with these selectors so let's see how it works. There is a CSS style called "selected",
1:17
and it basically sets the background to yellow and I think it adds a border as well.
1:21
So what we can do is we are going to go type arbitrary CSS things up here,
1:25
and click find elements, it will apply that style to the items that the CSS style matches.
1:31
Let's look quickly at the source code here, so we see what we are working with.
1:34
So here we have our little set, this part right here, we have our set of course images,
1:40
you can see they have a class course-img, it's hyperlinks in image and so on,
1:45
and then down here we have our recorded episodes and then we have a table, we'll play with those, we've got a table, and a tr and here we have a ths
1:52
we have tr in the body, we have tds, and some of these trs have the latest episode, some of them have usually one because that's an id,
2:02
there's this_month class on some of them, and then as it goes back, maybe that one is this_month, but as it goes back, those go away.
2:11
So let's go over here and play with our CSS selectors. Now, the most general CSS selector is just star, if we hit this,
2:18
we are going to select literally every element on the page. Not super interesting, so let's undo that,
2:24
we could find all of the table rows if we just hit tr, remember you can find and select any element with just the note name,
2:32
so here we are passing this into jQuery and jQuery uses CSS to find elements, and then do whatever you are going to do with them,
2:39
but the idea is really what you would do is you would put this in your CSS style sheets and then use it to target the styles of a thing.
2:47
So all right. So if we hit tr, you can see all of the rows are selected. If we wanted to look at just say, we could select just the table as a whole,
2:58
notice how the border just goes around that, and remember, if you put a space that means I want to find within the table a thing,
3:06
so I could come over here and say I would like to find all the t heads (th) within the table.
3:12
Now, that might be a little funky because where else would t heads live, of course they are going to live in the table.
3:17
We also look for things like the "text-date", and this is a class, so remember class you say . (dot) oops, I had that backwards,
3:28
let's do "date-text" now you can see we found all the text here and we could style this,
3:35
we could make this gray as we have here, do all sorts of things.
3:39
Also I could find all the course images, so course-img and that's going to select- oops,
3:45
this is a class, so we need dot, that's going to select these pieces, if we wanted to just get the images contained within them,
3:53
you could do that and you can see we are just selecting the images. Let's see what else we can get. We haven't used the id yet
3:59
so there is this one called latest episode, and let's go over here and say I would like to find the latest_episode
4:06
so when we do that we say #latest_episode that should be this one right here about the game
4:12
and we could also find the .this_month so that should select the first four and you can see it does select only the first four.
4:23
We can go farther, we could say i like just the tr so the table row that has the id latest_episode and the class this_month,
4:32
now because the way we set this up really this is the same as more or less searching for this, right, but let's go and write anyway.
4:38
So what we are saying here is tr with no space means "and", and so tr with the hash and the thing means the table row
4:47
with the latest_episode id and the this_month class. You will have this page in the code that you can get from GitHub,
4:54
and download it and run it and tweak the HTML, play with the CSS selectors, do all the stuff that you want, you can even come back here
5:02
and select the things that we are interacting with up here like I want the input and I also want to have all the buttons.
5:11
So if we do this, we can get these three things, right, and comma separating in CSS selectors is an "or" or maybe a grouping,
5:20
I want to get all the inputs and I want to get all the buttons and process them as the single thing.