#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Demo: Exploring CSS selectors
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now that you're familiar with our CSS selector app. Lets go click around, and see what we got. Let's start by exploring the idea of selectors.
0:09
That's what we've spoken about so far. So, here we have a static page, selectors.html. And it kind of looks like my podcast, right? Talk Python to Me.
0:18
So, you can see if we were to go to Talk Python and we were going to go to the episodes you'd see it looks very much like this.
0:26
However, what I've done is I've added this little section at the top that lets us type in CSS selectors. And so, for example
0:34
each one of these little blocks here is going to be a td, right? A table data element. If we hit that notice how they're all lighting up.
0:45
We can come down here and see that we have a whole bunch of little boxes lit up. And we can do, show me all the table rows. There are the table rows.
0:54
I could show me all the images. Then it goes to the images on the page. So the idea of this site is going to let us explore
1:01
and let you experiment with creating selectors that will do interesting things. Now, there's a bunch of HTML here
1:07
you can go and open it up and look at it but its not super relevant to know what's going on. Instead, I made this dialog using Bootstrap
1:15
to let us ask questions like "I would like to see all the elements that are episodes released this month."
1:23
So, they're going to have a class, this-month and it's worth pointing out the meaning of having a class is you know, there's a bunch of things
1:31
potentially with that class but the meaning of an id is that it's supposed to be unique within the page. So as you think about designing HTML if
1:38
there's going to be exactly one thing like one latest episode, than maybe its an id but if there's multiple things like
1:45
say, this-month or course-images or whatever then, of course you need that to be a class. So, lets go over here. I want to find all the stuff
1:53
that has the latest-episode. If I run that, nothing happens because this is an id not an HTML tag, right? So, remember, in CSS, how do we say id?
2:03
Hash, so hash latest-episode there. That's cool. What if we want to know about the ones that were this-month? Remember, that was a class.
2:14
So, to specify a class you say, dot. That little tiny dot right there. So, those are the ones that have run or released in March 2019.
2:25
See one on the 9th and one on the 13th. That's pretty awesome right? What else can we do? We could ask for the body.
2:32
We could ask for the table head, th and because that's an HTML element we just put, th, and that selects that. If you want tbody, for the table body
2:43
there's the table body. If you want all the things with class, button that would be this one, this one and this one that I can see.
2:52
This is a Bootstrap design style, click that and now all three of those change. So, it's kind of better this thing can even change itself, right?
3:00
Let's clean that up. Let's do one more thing, let's say we are interested in all the things that are course-images
3:06
but ultimately we're only going to be interested in the one that has a certain id. So, we come down here and say course-image and it's like that.
3:14
What if we wanted to select just the hyperlinks within there? Well, the way we have containment is we put a space, so we put a little
3:23
space right there and we put, a, for hyperlinks now the image itself is a hyperlink and that's a hyperlink. Okay? So, we're selecting that.
3:32
We could also say the ones that are only directly contained within there and it turns out that's how it is so it doesn't really make any difference.
3:39
We could also come over here and say that we want the course-images that are also have the name Pythonic. So, that selects the element
3:48
that is contained within the course-image that has id, Pythonic, and that's just the hyperlink there. Okay, so hopefully this gives you a sense
3:56
of what you can do with CSS and I really like the visual aspect so you want to see all the td's, the tr's the, this-month, things like that
4:07
it lets you quickly, quickly get feedback on experimenting with CSS selectors visually.