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

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

Need help with CSS selectors

Hi, I'm making this website www.ajp.cool and have this code on the front page where the slider is

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="#">
            <a href=""><div class="slider-text"></div></a>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        ::after
    </ul>
</div>

I would like to have hover on the text that is placed above the slider image (Illustartion, Pictorail Maps etc.). So here in the code:

<a href=""><div class="slider-text"></div></a>

Can anyone please tell me which selector to use:

I've tried:

a > .slider-text

ul.slides li a .slider-text

And it does not work. But I'm not very good at CSS selectors :)

2 Answers

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

I see ok well I inspected the elements and the way the markup is set up you cannot really select one of those because they share the same html and classes. Only way to do it is by using some type of advanced selectors.

Heres what you can do to select each of them individually:

//selects the first illustration
a[href^="http://www.ajp.cool/illustration/"] > div{ background-color: red !important; color: blue; }

//selects the second pictorial-maps
a[href^="http://www.ajp.cool/pictorial-maps/"] > div{ background-color: red !important; color: blue; }

//selects the third cartoons-and-comic-strips
a[href^="http://www.ajp.cool/cartoons-and-comic-strips/"] > div{ background-color: red !important; color: blue; }

//selects the fourth commercial-art
a[href^="http://www.ajp.cool/commercial-art/"] > div{ background-color: red !important; color: blue; }

//selects the fifth storyboards
a[href^="http://www.ajp.cool/storyboards/"] > div{ background-color: red !important; color: blue; }

//selects the sixth books
a[href^="http://www.ajp.cool/books-in-english/"] > div{ background-color: red !important; color: blue; }

The way I did it is selecting it by it's href value but you can do it many other ways. You can also do it with child selectors which would of probably been better but I didn't think your links would change. For a good list of all the CSS selectors click here

Also I called !important on the background style because something was taking priority over that style. So depending on where you call your css file will determine if you need the !important call or not.

And just so you understand why I had to use an advanced selector it was because all of those slide text box had all of the same mark up and classes. They all had a class called slider-text in common, with an anchor tag as parent so you would not be able to select a specific text box with just those selectors. But like I said if there are many different ways, if you want you can also use Child Selectors really up to you.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Thank you, Lucas.

But it does not work if I write this in my style.css (notice that I've adde hover bacuase hover background color is what I need.

a[href^="http://www.ajp.cool/illustration/"] > div:hover { 
    background-color: black !important; 
    color: white; 
}

Another thing - what about if I make the hover colour the same for all the six slider images. For example black.

Than we would only need to select 

<a href=""><div class="slider-text"></div></a>

Would that make it any easier to make a selector?

Thank you so much for taking your time to help me!

Maja

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, again Lucas,

It was impossible for you to help me, because I did not give you all the info.

The thing is that I have used inline style

<div class="slider-text" style="background-color:<?php the_field( 'slider_button_color' ); ?>"></div>)

for .slider-text. Why? Because I needed a different colour for every slider image (brown for Illustration, orange for Pictorial Maps etc.).

So none of the selectors worked because it was always overridden by the inline backfround-color.

Now that I've written:

.slider-text:hover {
    background-color: #808080 !important;
}

it works - all the six .slider-text get a black background when hovered.

So thanks for the idea of using !important.

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Yeah !important will prioritize that style first. And it was getting late last night so I did not have time to reply but I was going to say because all of your li > a elements have a div with slider-text as a class you can just select all of them from that if you'd like.

Works just the way you written it below.

.slider-text:hover{ 
//your style
 }

and if you would like to get more specific like I said you can always use Advanced Selectors preferably Child Selectors

Well glad you got your problem resolved :]

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Not to sure exactly what your question is but if you mean how do you select the text above your slider that says "llustartion, Pictorail Maps etc." on hover you could do.

h2.site-description:hover{

//your styles

}
Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Thanks Lucas. I guess I really was not clear enough with my question.

What I would like to hover is the text that is placed directly on (not above) the images in the slider. Do you know which one I mean? The coloured ones (each one has a different colour, for example Illustration is a kind of brown, Pictorial Maps is orange etc.) Can you also help me selecting that one?