Bummer!

This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Silver trial
to watch this video

Sign up for Treehouse
More Selectors

More Selectors

7:49

In this video, you'll learn about a few miscellaneous selectors in CSS3.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

  • 0:07

    [CSS3 Selectors - More Selectors with Nick Pettit]

  • 0:13

    So far, we've looked at attribute selectors and pseudo-classes.

  • 0:17

    However, CSS3 has a few more selectors to offer.

  • 0:21

    Let's take a look.

  • 0:22

    For this tutorial, I've added some markup to our page.

  • 0:25

    I've created a new post--right here--that contains a poll about surfing,

  • 0:32

    and I've added a link up in the navigation that links to that part of the page.

  • 0:38

    We'll be using these things throughout this video.

  • 0:42

    So first is the target pseudo-class.

  • 0:46

    Any time that you have a link on a page that links to another part of the page

  • 0:52

    the element that it is linking to becomes what's called the target.

  • 0:57

    For example, we have a link just like that that links to our poll, just like that.

  • 1:04

    So let's say that we wanted to select our poll,

  • 1:07

    but only if it's the current target, like it is now.

  • 1:11

    We can do just that using the target pseudo-class.

  • 1:16

    So let's go ahead and switch over to our CSS

  • 1:21

    and we're going to first select our poll,

  • 1:26

    and this is actually selecting the poll itself--in the post, not the link--

  • 1:32

    and then we'll use the pseudo-class target and we'll give it an orange background once again.

  • 1:43

    And when we switch back and refresh, it doesn't look like anything has happened,

  • 1:49

    but if we go ahead and click this poll link,

  • 1:53

    it'll jump down and it will also highlight the poll.

  • 1:57

    If you've ever clicked on one of the citation number links on Wikipedia,

  • 2:02

    you've actually seen this before.

  • 2:04

    The citation number will make one of the citations at the bottom of the page

  • 2:10

    a target, and Wikipedia styles those targets in blue.

  • 2:14

    Next is the enabled pseudo-class.

  • 2:18

    This is used to select buttons that are not disabled.

  • 2:22

    Now, I know that seems like an odd way to phrase it,

  • 2:25

    but you can't explicitly define a button as being enabled in HTML.

  • 2:31

    It's enabled by default, and it will only become disabled if you tell it to do so.

  • 2:36

    So let's go ahead and try this out.

  • 2:38

    We're going to first go ahead and switch over to our CSS,

  • 2:45

    and we have an id called poll_submit that is on our submit button,

  • 2:53

    and we'll go ahead and use the enabled pseudoclass.

  • 2:58

    And if the button is enabled and not disabled, it should be orange,

  • 3:05

    so let's go ahead and switch over to our browser and refresh.

  • 3:09

    And there we have it--we have our orange button.

  • 3:12

    But it'll only be orange if it's enabled, so let's go ahead and disable the button.

  • 3:17

    So we're going to switch over to our HTML here,

  • 3:22

    and our button is right here--it's actually an input tag, and to disable it,

  • 3:28

    we'll add the disabled attribute with the value disabled.

  • 3:34

    And when we save that and switch over to our browser and refresh,

  • 3:38

    you can see that it's no longer highlighted,

  • 3:41

    because it'll only be highlighted if the button is not disabled.

  • 3:46

    Now that this button is disabled,

  • 3:49

    let's go ahead and try to select it.

  • 3:51

    We can do that with the disabled pseudo-class.

  • 3:54

    So we'll switch back over to our CSS,

  • 3:57

    and we'll change enabled to disabled.

  • 4:02

    When we switch back to the browser and refresh, you can see that our disabled button

  • 4:07

    has now been selected.

  • 4:09

    So let's go ahead and move on.

  • 4:11

    Let's say that you wanted to select these radio buttons that we have right here

  • 4:16

    but only when they're checked.

  • 4:19

    There's a pseudo-class for that called checked,

  • 4:22

    so let's go ahead and try that out.

  • 4:24

    We'll switch over to our text editor,

  • 4:27

    and we're going to change this a little bit, so that we're first selecting our poll.

  • 4:32

    And we want to select all of our input elements, but only if they're checked.

  • 4:38

    And we can't actually change the background on these,

  • 4:42

    so we'll change the width and the height.

  • 4:48

    There's not a ton of styling we can apply to radio buttons,

  • 4:51

    but we can at least see when we click them and when they're being selected.

  • 4:55

    So let's go ahead and refresh the page, and when we click these,

  • 5:01

    we can see that the currently selected radio button will have its width and height changed.

  • 5:07

    Pretty nifty.

  • 5:09

    Next, we have the negation pseudo-class.

  • 5:12

    This is a very special pseudo-class that will select the opposite

  • 5:17

    of your current pseudo-class selection, so let's say that you wanted to select

  • 5:22

    the radio buttons that were not currently checked.

  • 5:26

    To do that, we need to use the not pseudo-class, so after input here,

  • 5:32

    we'll use the pseudo-class not, and we'll put (checked) and save that out

  • 5:41

    and when we switch back and refresh the page, as you can see,

  • 5:46

    when we select a radio button, the check state is actually the default,

  • 5:52

    whereas the not checked state defined by the negation pseudo-class is indeed styled,

  • 6:00

    and you can see that's actually also affecting our Submit button right here.

  • 6:06

    Now, we're going to take a look at one last selector called the general-sibling-combinator.

  • 6:13

    Sometimes, you'll want to select a sibling element that is not directly adjacent

  • 6:18

    to another sibling.

  • 6:20

    Using this more generalized sibling combinator, we can do just that.

  • 6:24

    So we'll go ahead and switch over to our CSS and we don't need any of this here.

  • 6:29

    And we'll select our unordered list, we'll select our sidebar,

  • 6:36

    and we'll give it a background of orange.

  • 6:40

    And I'll explain the selector in just a second.

  • 6:44

    So when we switch back and refresh, you can see that we've now selected our sidebar.

  • 6:52

    So when you use the general sibling combinator,

  • 6:56

    you use the tilda character ~ which you can see right here.

  • 7:00

    Anything that comes after the tilda is the sibling that will actually be selected,

  • 7:07

    which in this case is the id sidebar.

  • 7:10

    The part that comes before it--which in this case is the unordered list--is a sibling

  • 7:18

    that came previously in the code,

  • 7:20

    so this selector will first try and find any unordered lists on the page,

  • 7:26

    and if there are any elements of the id sidebar that come after it,

  • 7:31

    those will be selected.

  • 7:33

    That about covers the basics of CSS3 selectors.

  • 7:36

    Browser support is currently looking very good for these,

  • 7:40

    so you should be able to use them with more confidence as time goes on.

  • 7:44

    [?mellow guitar music?]

  • 7:47

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.