CODEWITHSUNDEEP
htmlcss
PeteTheGreek
PeteTheGreek

Reputation: 729

Referencing class with additional class

I've got a jquery slider function on a page, and when the slide rotates I need the style of a LI tag to change.

So when the slider goes onto a li the class looks like this:

<li class="first sliderkit-selected">

And when it moves off it looks like this:

<li class="first">

But when the class goes to "first sliderkit-selected" I need it to be referenced from the style sheet but not sure how it is constructed, so far I've played around with:

li.sliderkit-selected li.first {
    background-color: red;
}

But it doesn't seem to pick it up.

I know you could use a comma inbetween each class, but I want a style to be referenced exclusively when those two class's are together, if that makes any sense.

Thanks.

Upvotes: 0

Views: 88

Answers (4)

sandeep
sandeep

Reputation: 92873

You can write like this:

.sliderkit-selected.first {
    background-color: red;
}

OR

.first.sliderkit-selected {
    background-color: red;
}

Upvotes: 0

wsanville
wsanville

Reputation: 37516

If you want to select an element with multiple classes, you simply append the classes with a dot, like this:

li.first.sliderkit-selected { /* your rules */ }

This means "a li tag with the class first and the class sliderkit-selected".

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78046

To select a DOM element with multiple classes, concatenate the classes in the selector: 

li.sliderkit-selected.first {
    background-color: red;
}

Upvotes: 1

Zeta
Zeta

Reputation: 105985

You're looking for li.sliderit-selected.first:

li.sliderkit-selected.first{
    background-color: red;
}

See also:

  • CSS Selectors Level 3: Class selectors

    The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine:

     p.pastoral.marine { color: green }

    This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".

Upvotes: 1

Related Questions