Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Selectors

Well done!

You have completed CSS Selectors!

Sign up for Treehouse Back to Library

Child, Adjacent, and General Sibling Combinators

9:03 with Guil Hernandez

Combinators give us the flexibility of targeting any siblings of an element. We can use the greater-than sign (>), plus sign (+), or tilde symbol (~) to make our selectors more specific.

Quick Reference

Using combinators

  • The > combinator targets a direct child of an element
  • The + combinator targets an element's immediate sibling
  • The ~ combinator targets all the specified siblings that follow an element

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    We'll need to use a combinator, and would actually used combinators back in 0:00
    CSS basics when we wrote descendant selectors, 0:02
    because the white space between the two selectors is also considered a combinator. 0:05
    Besides being able to target descendant elements, 0:10
    combinators also give us the flexibility of targeting any siblings of an element. 0:13
    We can use the greater than sign, the plus sign, or 0:17
    a tilde symbol to make our selectors more specific. 0:20
    Let's take a look at these. 0:23
    First up, in a CSS selector, 0:25
    the greater than sign is referred to as a child combinator. 0:27

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up