Styling different classes that belongs to a span tag

Question

I'm working on a asp.net mvc 3 application. We are several people on this and even it is a slim chance I don't want to get in a situation where we merge CSS where the same names were used to define classes and ID.

I have this certain situation where I have span tags :

@:<span class="QuestionType3">

@:<span class="QuestionType4">

In my CSS I define the style for those classes like this :

.QuestionType3 {
    background: grey;
    display: inline-block;
    }
.QuestionType4 {
    background: lightgrey;
    display: block;    
}

What I want is to be the most specific as possible so even if the same name is used for a class of a div tag or something else there won't be problems until more than one people use this name to define class of span tag.

I tried :

span .QuestionType4 {...

but this way I lost all the styling what so ever, so it seems this is not the correct way to specify this. So how can I do it and am I right in this that if I specifically declare that this is class of a span tag then using the same name for a class of different HTML element won't cause problem for duplicated names or something like this?

Answer 1

Remove the space, so it becomes:

span.QuestionType4

With the space ( descendant combinator ) it will select all elements that have the .QuestionType4 class and that exist inside span s