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 Attribute Selectors

Anthony Vick
Anthony Vick
5,096 Points

When using class="form-contact" the settings appear for an instant and then go back to being as if they weren't there.

Doing as the video describes. Simply using "class" by itself doesn't cause this to happen. Can't find any reason for it and I haven't made any other changes to index.html, base-style or selectors.css.

This is my code in selectors.css:

[class="form-contact"] { color: red; padding: 20px 24px; background: grey; }

Anthony Vick
Anthony Vick
5,096 Points

Oops. Nevermind. Figured out what I did wrong. Would have caught it except it worked just fine before I set it to a specific class. It should be

form[class="form-contact"] { color: red; padding: 20px 24px; background: grey; }

Not sure how I missed it the first time.

edit:Nope. Actually, it's still doing it and the syntax is correct this time, I think.

Update 2: Finally just copied someone else's code on here (there were no differences between mine and theirs other than the specific color choices of the code and whatnot. Theirs also resulted in the same problem. My changes appear for one second, then disappear like they were never there.

Their code: (which is the exact same as in the video): form[class="form-contact"] { padding: 20px 24px; background: #f4f7f8; }

It seems as though ANY other class or form selectors work. but class="form-contact" results in this confusing behavior. I don't think I'm doing anything wrong, but I'm leaving this here because I'd like to know if I am. I'm getting different results from copy/pasting the same code other students have used. It works just fine unless I select a specific class and I don't know why.

1 Answer

If you could, post your CSS (reference the Markdown Cheatsheet). I bet we can figure this out.