CODEWITHSUNDEEP
htmlcss
user3469203
user3469203

Reputation: 547

CSS : Sub Class is not working

I've got this html element :

<span class="item-menu-notif non-lue" onclick="dosomething(2150)">
TEXT
</span>

Here's CSS classes :

.item-menu-notif{
    display: block;
    cursor: pointer;
    padding: 0 0.4em 0 0.4em;
}

span.item-menu-notif:hover{
    background: #aaaaaa;
}

span.item-menu-notif .non-lue{
    font-weight: bold;
}

My problem is that the non-lue class is not use. In firebug I can see that the class doesn't appear on my span element.

I can't understand why. I tried with and without span selector on my CSS. It's the same result.

Upvotes: 0

Views: 368

Answers (4)

Oliver
Oliver

Reputation: 1644

This selector says that an element with a class of .non-lue inside your span will be styled, instead of the span element.

span.item-menu-notif .non-lue{ font-weight: bold; }

Remove the space and it will go from saying .non-lue inside the span to span with .item-menu-notif AND .non-lue.

span.item-menu-notif.non-lue{ font-weight: bold; }

Upvotes: 2

gdyrrahitis
gdyrrahitis

Reputation: 5958

It's because of the

span.item-menu-notif .non-lue{ font-weight: bold; }

With this you tell to the browser, "find for me an element with the class '.non-lue' that is into a span element with the class name 'item-menu-notif'".

For specifying a more explicit rule for an element, like in your case, where you want a span element that is an 'item-menu-notif' and a 'non-lue' you should provide the class names without whitespace between them (with a whitespace character between selectors it is assumed that the right most is a descentant of the left side selector).

Please check out these links, hope they will help you: The first one is about selectors and the second & third are about specificity rules.

1) http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

2) https://css-tricks.com/specifics-on-css-specificity/

3) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

And of course the right answer is:

span.item-menu-notif.non-lue{ font-weight: bold; }

Upvotes: 3

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You should do this

span.item-menu-notif.non-lue{
    font-weight: bold;
}

Upvotes: 1

Dygestor
Dygestor

Reputation: 1259

Remove the space between the selectors:

span.item-menu-notif.non-lue

You only use space if you want to target elements who are descendants. But since you want to target the element with both classes, you have to remove that space between them.

Upvotes: 4

Related Questions