Bummer! You must be logged in to access this page.

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 Quickstart

Well done!

You have completed CSS Selectors Quickstart !

Sign up for Treehouse Back to Library

CSS Selectors and JavaScript

2:12 with Guil Hernandez

In this stage, we'll explore the role of CSS selectors in JavaScript. You'll also learn tips for naming selectors and working with selectors in JavaScript.

This video doesn't have any notes.

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

    [MUSIC] 0:00
    >> You've learned enough about CSS selectors to change the appearance of 0:04
    webpages. 0:08
    But why is it also important that you understand selectors when working with 0:09
    JavaScript? 0:12
    As you've learned, selection is a way to identify an element for a browser, so 0:13
    the browser can find it and make it available for us to do something with it. 0:17
    For example, target a visited link and change its text color to azure. 0:21
    Well you also use selectors in JavaScript when writing code that works with the DOM, 0:26
    or Document Object Model. 0:31
    Just like CSS selectors control the appearance of elements on a web page, 0:32
    selectors are used in JavaScript to let you control an element's behavior, and 0:36
    apply functionality to the page. 0:40
    There are lots of tasks you can perform once you select an element 0:42
    with JavaScript. 0:46
    Like, read its content and manipulate it in many ways. 0:47
    JavaScript provides methods that let you select and 0:51
    retrieve elements from the DOM by matching against one or a set of selectors. 0:53
    You can select HTML elements based on their ID, class, 0:58
    type, attributes, and values, and more. 1:03
    For instance, the get element by ID method targets an element, 1:05
    who's ID value matches the ID selector you include between the parentheses. 1:09
    And you can see an example of that here. 1:15
    [BLANK AUDIO]. 1:17
    Notice the selectors pass to the method here in the mdm docs. 1:20
    When you pass into many of JavaScript selection methods, 1:25
    is the same as a CSS selector. 1:28
    Other selection methods like querySelector and 1:32
    querySelectorAll accept class, element, and attribute selectors. 1:35
    As well as, the pseudo classes and combinators you learned earlier 1:40
    to determine what element or elements should be returned. 1:43
    Now you don't need to worry about what all these JavaScript code means yet, 1:47
    you'll learn about them in a later course about JavaScript in the DOM. 1:51
    I just wanted to show you some examples of how selectors get applied in JavaScript. 1:54
    So coming in this stage, 2:00
    we'll have a deeper look at the role of CSS selectors in JavaScript and 2:01
    go over tips for naming your selectors and working with selectors in JavaScript. 2:06
    Let's keep it going. 2:11

    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