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 CSS Selectors Selectors - Beyond the Basics DRY CSS

For 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; }

Montani Semper Liberi my man...

6 Answers

Philip Enchin
seal-mask
.a{fill-rule:evenodd;}techdegree
Philip Enchin
Full Stack JavaScript Techdegree Student 24,726 Points

These 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
David Elston
8,112 Points

For 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Philip Enchin
Full Stack JavaScript Techdegree Student 24,726 Points

The 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 */ }

Thank 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
Sina Maleki
6,135 Points

if 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
Charlie Storey
6,469 Points

Still 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
Charlie Storey
6,469 Points

Gotcha. Cheers Philip, much appreciated.

Nick Strom
Nick Strom
1,309 Points

Was 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.