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

Java Build a JavaFX Application Build a Pomodoro App Build the State Change Events

Konstantinos Pedarakis
Konstantinos Pedarakis
21,301 Points
Posted by Konstantinos Pedarakis
Konstantinos Pedarakis
21,301 Points

How .focus class overrides the styles in the container with the id #container?

Hi,

i saw that in this example Craig uses the addAttemptStyle method to add the .focus/.break classe to the container, just to change the background color. but i cannot do that and seems pretty reasonable while we can't override the background color specified with an id #container, with just a simple class .focus, as according to CSS standards, id's have more specificity than classes.

I.m not sure how this works in Craig's video, but i cannot make it work. i have to remove the property -fx-background-color from the id #container, to make it work and again this is how it should work.

Any ideas on that?

1 Answer

Boban Talevski
Boban Talevski
24,793 Points
Boban Talevski
Boban Talevski
24,793 Points

What you say makes sense and got me to delve deeper in this CSS thing as so far I've mostly heard of it and didn't really realize how it all works and how it's used.

Anyway, what Craig does seems to works because we are not using the exact same attribute. In the id #container, we use the attribute background, which seems to be a shorthand for multiple background attributes (still new to CSS, so don't get what this means exactly), while in the classes .break and .focus we use the exact attribute background-color, which somehow seems to "win over" the attribute background set in id #container.

I see that this thing is called specificity in CSS terms, and by some logic, since we are using a more specific attribute (background-color instead of just background), it makes it more specific and having higher specificity :). Even if it's in a class, rather than the #id thing.

On the other hand, I changed the attribute name from background to background-color in id #container and confirmed that what Craig does doesn't change the background color, which is the expected behavior considering id #container should "win this fight".