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 Basic 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.

  • 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