Question

I have a question… I want to create a class called thumb w/ all the necessary information for each item and the hover. Then I want them to have their own specific behavior when within a parent node. here’s what I have so far and it’s not working.

.thumb
{
    display:block;
    float:left;
    width:10px;
    height:10px;
    margin:5px 10px 5px 10px;
}

.thumb:hover
{
    border:solid 1px #F00;
}


#commercial
{
    margin:0 auto;
    width:100px
}

#commercial.thumb
{
    background-color:#0A0;
}

#wedding
{
    margin:0 auto;
    width:100px
}

#wedding.thumb
{
    background-color:#00F;
}

#fashion
{
    margin:0 auto;
    width:100px
}
#fashion.thumb
{
    background-color:#F0F;
}

i’ve also tried declaring the thumbs within the id’s as

#id > a.thumb

and

#id > .thumb

nothing seems to work. I figured this would be a more efficient setup as it would allow me to change every thumb regardless of parent div w/ just one block of code instead of 3, any insight is greatly appreciated.

thanks,
Brodie

Answer 1

saying #fashion.thumb means you want to match an element like:

<div id="fashion" class="thumb">

Splitting it up into #fashion .thumb (note the space) is “any element with class ‘thumb’ that is a descent of the element with id fashion, which’d be:

<div id="fashion">
   <span class="thumb"></span>
</div>