Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ullas Savkoor
Ullas Savkoor
6,028 Points

How to use the CSS3 selector to select the submit button in js file instead of using the id attribute of submit button ?

In the video the submit button is selected using the id attribute of the submit button, however in the video it is also mentioned we can use CSS3 selector to select the button element.

Could someone show how to select the button element using the CSS3 selector ?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Can you provide a link to the video?

Ullas Savkoor
Ullas Savkoor
6,028 Points

This is the link to the video https://teamtreehouse.com/library/jquery-basics/creating-a-password-confirmation-form/perfect

Below is the html present in the workspace associated with the workspace(I would like to select the <input type="submit" value="SUBMIT"> element without having to adding an id or class attribute in the JS file ie something like Jquery(CSSselector_of_button_element)) : <!DOCTYPE html> <html> <head> <title>Sign Up Form</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> </head> <body>

<form action="#" method="post">
    <p>
        <label for="username">Username</label>
        <input id="username" name="username" type="text">
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password">
        <span>Enter a password longer than 8 characters</span>
    </p>
    <p>
        <label for="confirm_password">Confirm Password</label>
        <input id="confirm_password" name="confirm_password" type="password">
        <span>Please confirm your password</span>
    </p>
    <p>
        <input type="submit" value="SUBMIT">
    </p>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body> </html>

4 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Without knowing which video you are referring to I can only be generic.

:point_right: Selecting an element by ID in CSS is done by prepending a pound-sign ("#") to the id.

For example, if you wanted to select an element with the id "mybutton" and set the text color to blue, you could use this CSS:

#mybutton { color: blue; }
Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

As Steven mentioned, it'd help if we knew which video you heard this in so we could review it and understand the context.

If the buttons were created with the button tag, <button> then you can select the button the same way you would other elements:

button {
  width: 20px;
}

Doing it this way instead of using a class or id means the styles would be applied to ALL the buttons.

This StackOverflow post clarifies a bit more.... http://stackoverflow.com/questions/3540380/how-can-i-apply-css-on-all-buttons-which-are-present-in-that-page

As that post also mentions

"If your buttons are <input type="button"> or submit, then this should do it:

input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
}

"

Ullas Savkoor
Ullas Savkoor
6,028 Points
Ullas Savkoor
Ullas Savkoor
6,028 Points

Thanks for the reply. I wanted to select the button element in the html element without adding any class or id attribute , just plain CSS3 selector.

@Kristopher Van Sant and @Steven Parker -for the html I have shared is the below statement correct in selecting the button element in the js file: $("input[type=submit]") ?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Yes, now that I've seen the code, this should select your submit button as a JQuery object:

$("input[type=submit]")

I thought you were asking for a way to select it using CSS. That would be:

input[type=submit] { /* your properties here */ }

But now that I've seen the video, it looks like what you wanted all along was a "CSS-style JQuery selector" (the first example). The phrase "CSS3 selector" makes sense in the video, but out of context it is a bit misleading.