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