<span> css multiple css class - hierarchy

Question

I have a <span class="tabs-fadding-number"></span> that have the following properties : :

.tabs-fadding-number {
    display: none;
    position: absolute;
    margin-left: 40%;
    top: -12px;
}

Now using Javascript I add another class to that span <span class="tabs-fadding-number add"></span> :

.tabs-fadding-number .add {
    color: #357ae8;
}

However my css rules is not applied. How can I have a child .add css class, that is only applicable to .tabs-fadding-number class elements ?

Thanks

Answer 1

Remove the space between the class names.

.tabs-fadding-number.add {
    color: #357ae8;
}

Otherwise, what you're doing is finding elements with .add that is within .tabs-fadding-number as a parent.

Answer 2

Just look up in Chrome Developer. It's something like this

span.tabs-fadding-number.add