CODEWITHSUNDEEP
htmlcss
vaindil
vaindil

Reputation: 7854

Styling a background with multiple classes

I have a plugin for WordPress that generates a calendar on my WP blog. It actually pulls from several of my calendars and displays all of the events together. This is the relevant piece of the generated HTML:

<div class="gce-event-info">
<ul>
<li class="gce-tooltip-feed-2">
<div class="gce-list-event gce-tooltip-event">Group 2</div>

I need to style the backgrounds of each header part here (so the part that says "Group 2") differently, but I'm not sure how to go about this using CSS. There are eight different feeds that need to be styled differently, and the unique class is gce-tooltip-feed-X. I tried the following, but it did not work:

.gce-tooltip-feed-2 .gce-list-event .gce-tooltip-event{
    background-color: black;
}

I also tried using just .gce-tooltip-feed-2 in the above declaration, but it did not style the head part.

Upvotes: 2

Views: 118

Answers (2)

Craig
Craig

Reputation: 23

Try:

li.gce-tooltip-feed-2 .gce-tooltip-event {  
  background: black;
}

Upvotes: 0

Damonsson
Damonsson

Reputation: 1532

.gce-tooltip-feed-2 .gce-list-event.gce-tooltip-event{
     background-color: black;
}

Without space between .gce-list-event.gce-tooltip-event

If you want to be independent of X in the gce-tooltip-feed-X. You need to add to the li some class. Or inseparable X.

Option 1:

<li class="gce-tooltip-feed-2">

replace on

<li class="gce-tooltip-feed-2 gce-tooltip-feed">

Option 2:

<li class="gce-tooltip-feed-2">

replace on

<li class="gce-tooltip-feed number2">

css for options 1 and 2:

.gce-tooltip-feed .gce-list-event.gce-tooltip-event{

Upvotes: 1

Related Questions