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

glenn romaniuk
glenn romaniuk
32,520 Points
Posted by glenn romaniuk
glenn romaniuk
32,520 Points

can't get 2nd class to apply styles over first

I have 2 classes i would like to apply to my element the first selector uses a combinator to target a class that begins with and is a last child. this part is working. The selector basically floats the element right. Id like to also target special right child elements (i'll determine which ones manually) and change the float to left. I can get the leftjust class to apply itself. I've played around with order of the selectors, order of the class identifiers etc. Seems to be some type of a special case with combinators.

Example code:

<div class="grid-container content"> <div class="grid-2"> Label4: </div> <div class="grid-2 leftjust" > Field4 </div>
</div>

.grid-container > [class^="grid-"]:last-child { float: right; }

.leftjust { float: left; }

5 Answers

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

If I understand correctly you want to float .grid-container to the right,, and then float .left-just back to the left. This however cannot be done because .left-just is inside .grid-container and therefore can only be moved to the edge of it's parent element. If you don't understand here's a example on codepen

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

carman arrington - That's a pretty neat idea using the check boxes styled as buttons.

Carman A
Carman A
7,672 Points

Thank you :)

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Could you post your code to codepen?

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Note how you cannot float .box2 out of it's parent element .box.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Glenn,

I think you a have a css specificity problem. In your example code, both of your selectors are targeting the same element. The first selector uses 3 classes and so it has a higher specificity than your second selector which has a single class. The only way that you can override the float: right and change to float: left is if you match or exceed that specificity.

Here's one way you can do that:

.grid-container > .leftjust:last-child {
    float: left;
}

This uses 3 classes as well so it matches the specificity of the first selector and so whichever one comes later takes precedence.

Combinators do not affect specificity so whether you use direct child or not shouldn't matter. You could drop the direct child combinator from the second selector (leave it in the first) and float: left will still take effect. Of course, you may need to keep it in based on your full markup but your example doesn't require the direct child combinator to be used.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

This could work too but perhaps not quite as much browser support. You can think of this as a way to bypass the specificity issue and be able to use the .leftjust class by itself.

Using the negation pseudo class:

.grid-container > [class^="grid-"]:last-child:not(.leftjust) {
    float: right;
}

.leftjust {
    float: left;
}

Probably harder to read though. The selector is starting to get pretty long.