nesting css class for sprite image

I'm just bit confused on css Id/class nesting.

sample code below:

1) #sprit-img {
    display:inline;
    border:1px solid #FFF;
    text-decoration:none;
    display:block;
    float:left;
    width:50px;
    height:50px;
    background-image:url(ig-sprite.png);
    background-repeat:no-repeat;
    margin:5px;
    }
2) #sprit-img 开发者_JAVA百科a.brew{
    background-position:2px 0px;}  
3) #sprit-img a.scc{
    background-position:-295px 2px;}

in page i used like

4) <div id="sprit-img><a class="brew"></a>...</div> `

now i want to use it like

5) <div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>`  

Questions

1. is it necessary to give anchor or any element tag in code line 2 and 3?
2. what would be optimal way to get line 5(if Q1 is true, to have in css class i removed # and place . but not working in my page)? is this correct

--

6) .sprit-img{.....same code..}  
    .brew{...same position..}  
    .scc{..same postion...} 

and use it like in line 5 or this is correct

7) .sprit-img{.....same code..}  
    .sprit-img .brew{...same position..}  `

Thanks.

edit: I tried some mix put background-image from sprit-img to brew and scc and found that if i put style as in 6 the html part should be like

<div class="anything"><span class="sprit-img brew"></span></div>

and if i put style like in 7 html part should be like

<div class="sprit-img"><span class="sprit-img brew"></span></div> but could not make it like 5 any idea ...

Q.1: No.

Q.2:

You need a way to target both types of things inside your div at once in order to apply the same bg image, as well as a way to differentiate them. There are numerous solutions.

As long as you're sure that anything nested inside sprit-img should take the background, you could do this:

<div class="sprit-img">
    <a class="brew"></a> <span class="scc"></span>
</div>

#sprit-img * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

(note: * is the universal selector)

...though that could get you in trouble if you need any markup inside of those elements (everything would take the background image, and it would be a funky jumble)

So, if you are sure all child elements (nested only 1 level down) should take the background, but nothing inside of those elements should, then you can use the child selector ( > ) like this:

<div class="sprit-img">
    <a class="brew"><span> some text></span>some other text</a> 
    <span class="scc">more text <strong>something important</strong></span><
</div>

#sprit-img > * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

if you want to avoid the universal selector (rendering could be slow on older machines or with earlier browser versions), you could alternatively use (with line 5 markup):

#sprit-img > a, #sprit-img > span { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

...which would then only apply to anchors and spans inside of an element with id="sprit-img"

Or you coulld avoid tag-names altogether (if you are super render-speed conscious) (with line 5 markup)

#sprit-img .bew, #sprit-img .scc { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

...which illustrates why the answer to your first question is "no"

# is an ID selector, . is a class selector. So you could change to:

.sprit-img {...}  
.sprit-img .brew {...}  
.sprit-img .scc {...}

and

<div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>

However, the real problem is your trying to use non-cascading properties in .sprit-img on the child elements. The first selector should be changed to .sprit-img .brew, .sprit-img .scc