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 trialRyan Dotson
11,378 PointsFor some reason, when I added the "br" class, it removed the background color from the form. Why?
I tried it in Firefox and Chrome...
form[class="form-contact"] { padding: 20px 24px; background: #f4f7f8; }
.br { border-radius: .5em; }
Ryan Dotson
11,378 PointsMontani Semper Liberi my man...
6 Answers
Philip Enchin
Full Stack JavaScript Techdegree Student 24,726 PointsThese two pieces of code behave nearly the same way, but have a subtle difference in how they select elements from index.html
:
.form-contact { /* some styling…*/ }
[class="form-contact"] { /* some styling…*/ }
In the first example, the styling will be applied to every element that is assigned the class, form-contact
.
In the second example, however, the styling will be applied to every element where the class
attribute equals "form-contact"
.
Now consider this html snippet:
<form class="form-contact br">
This has the class form-contact
applied (as well as br
) but the class
attribute's value now equals "form-contact br"
. This doesn't match the value you're comparing it against anymore.
I guess the moral here is that you should use normal class selector notation when you're selecting classes. As soon as you apply a second class, the value of the class
attribute changes, but the normal class selector notation will still work.
David Elston
8,112 PointsFor what it's worth to anyone finding this same issue, this answer also solved my problem. Changing the CSS code to
.form-contact {...}
instead of
form[class="form-contact"] {...}
fixed the issue.
Philip Enchin
Full Stack JavaScript Techdegree Student 24,726 PointsThe problem is how the class is being selected in CSS. Consider this code:
.form-contact { /* styling… */ }
.br { /* other styling… */ }
This applies styling to elements with the class form-contact
and other styling to elements with the class br
.
In HTML, we can apply multiple classes to the same element using a space between class names, like so:
<form class="form-contact br">
This assigns to the form
element the form-contact
class and the br
class. The form
element is considered to have both classes applied separately.
Now consider this alternate method of selecting a class in CSS:
[class="form-contact"] { /* styling… */ }
[class="br"] { /* other styling… */ }
[class="form-contact br"] { /* more styling… */ }
The difference between this selector and the one at the top of this answer is that whereas the prior example will apply styling to elements that have the specified class names assigned, the latter will only work in cases where the value of the class
attribute in HTML exactly matches the value of the class
attribute specified in CSS.
In this case, the code isn't selecting a class, it's selecting an exact match for the value of the class
attribute. Because the strings "form-contact"
and "form-contact br"
are not the same, the selector will not work as intended. In other words, even though the form
element has two distinct classes applied, using an attribute selector for the class
attribute selects based on an exact text match and can't distinguish two separate classes, form-contact
and br
.
The latter example will work as follows:
[class="form-contact"] { /* selects elements with only the class, "form-contact" */ }
[class="br"] { /* selects elements with only the class, "br" */ }
[class="form-contact br"] { /* selects elements with the classes, "form-contact" AND "br", separated by a single space */ }
Whitey McCracker
2,029 PointsThank you very much for your input. I was having the same problem as many people here are with the background color(s) disappearing. Your explanation greatly increased my understanding of selectors and values above and beyond what's being discussed in this CSS lesson.
Thanks again.
Sina Maleki
6,135 Pointsif you use attribute selector you have to type the below rule:
form[class~="form-contact"] {
padding: 20px 24px; background: #f4f7f8;
}
[attr~=value] Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
Charlie Storey
6,469 PointsStill a tad unclear. As the the first OP posted, I thought the 'form' was just the element, and wouldn't conflict with addition of the new .br class? I too seem to have sprung a leak with the same issue.....struggling to resolve it.
Charlie Storey
6,469 PointsGotcha. Cheers Philip, much appreciated.
Nick Strom
1,309 PointsWas having the same issue and thought I should chime in. It's worth noting that it was never explained in the videos that the:
form[class="form-contact"] { padding: 20px 24px; background: #f4f7f8; }
was changed over to:
.form-contact { /* some styling…*/ }
When you launch the workspace, or still have it open from the previous lessons, the first line of code is what is there. I didn't notice it changed until I read this thread and re-checked the video.
Bryan Mularcik
1,145 PointsBryan Mularcik
1,145 PointsGo Mountaineers!