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

CSS The Selectors Solution

Posted by buzuctkdfv
buzuctkdfv
4,118 Points

Is there a difference between using Input Type and Class selector for the Submit and Text Field requirements?

/* Change the background color of the submit button when active. Check teacher's notes for resources on this part of the challenge. */

.submit:active{ background-color: orange; }

/* Give the text field a blue border upon focus. Check teacher's notes for resources on this part of the challenge. */

.text:focus{ border-color: blue; }

I got the same result, but i used the class selector .submit and .text. instead of the type selector in the solution video.

2 Answers

Matt Brock
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

For general styles across an entire site, it's best to set the states using the attribute selectors and override using classes on a per-element basis. Attribute selectors and class selectors both receive the same specificity rating, but can be used differently. Example:

// Default for all submit buttons
input[type="submit"]:active {
  background-color: orange;
}

// Override for a specific case (alert button)
.btn--alert:active {
  background-color: red;
}

// Default for all text inputs
input[type="text"]:focus {
  border-color: blue;
}

// Override for a specific case (text in dark theme)
.theme--dark .text-input:focus {
  border-color: #f7f7f7;
}
Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

There's no practical difference between any selector method that targets the appropriate elements.

But the point of this exercise is to practice selecting specific elements without modifying the HTML. Adding classes to elements to make them easy to select is a valid technique, but it's not what this course is teaching.