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

Paul Murphy
Paul Murphy
6,162 Points
Posted by Paul Murphy
Paul Murphy
6,162 Points

pseudo elements for hove states

Hi guys,

I'm trying to apply the following: 

.column-1 span:hover {
    background-color: blue;
}
.column-1 span:first-child:hover {
    background-color: none;
}

What I want is for the first-child span tag to not have a hover state. I thought the above coding structure would work but it doesn't seem to be responding to it.

Any help appreciated.

Thanks

3 Answers

Samiruddin Syed
Samiruddin Syed
3,136 Points
Samiruddin Syed
Samiruddin Syed
3,136 Points

firstly a good practice is to not involve and special signs like "-" in the names of any classes or id's of any html element. so you should try to change the name and try.and if that doesn't help then try to keep a background-color : transparent for the child. hope this helps.

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

Thanks for the input but I don't believe that the use of "-" will inhibit the application of styling. If anything it improves specificity. Throughout the courses and deep dives we have been encouraged to use "-" to define classes and ids.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Samiruddin Syed

As mentioned hyphens are very common in class names.

You did catch the problem though. background-color: transparent

Paul Murphy

none is not a valid value for background-color You would want to use transparent.

background: none would work because what you're really doing here is setting the background-image to none and then all of the other individual property values you have omitted will be set back to their initial value. This effectively sets background-color back to transparent

An alternative solution using :nth-child could be:

.column-1 span:nth-child(n + 2):hover {
    background-color: blue;
}

This skips the first span. This is possibly less efficient but I don't know for sure. It does reduce the css though.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

In reference to using "-" in a selector, I disagree that it's best practice to not do so. It's just fine, it actually helps with readability and many sites and frameworks use it, including me.

With that said, Paul check this out. I put a black border around the span so it's visible. I believe this was the hover functionality you were going for.

http://codepen.io/kevink/pen/egHtl

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

Hi Kevin,

Thanks for responding! However the code you suggested didn't seem to work for me.

Heres what I have:

http://codepen.io/paul-masteel/pen/hwpFk

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

We have all made assumptions here about the html that have turned out to be incorrect.

I had assumed the span's were siblings, and they are, but you have a mixture of types.

Your original css could have worked out using first-of-type and not first-child because you have mixed siblings. However, in your codepen demo you're setting 3 properties in the hover state. So you would have had to fix the background-color problem as well as set color and padding back to what they were.

This seems like it's getting to be too much work so at this point I would recommend my alternative solution in the comment.

nth-child needs to be switched to nth-of-type though because of mixed siblings. It looks like you tried to use it in your codepen but it was meant as a single rule solution as opposed to your original 2 rule solution. It skips the 1st span and so you just apply whatever styling you want to the 2nd, 3rd, and so on.

.column-1 span {
    font-weight: bold;
}
.column-1 span:nth-of-type(n+2):hover {
    background-color: #496794;
    color: #fff;
    padding: 3px 3px;
}

See if that does what you want. nth-of-type support isn't going to be 100% but nothing will be broken here if it doesn't work. A small amount of visitors will just see the span's in bold and not the hover effect.