CODEWITHSUNDEEP
htmlcss
Motive
Motive

Reputation: 3111

How to target this HTML in CSS?

I'm trying to style Vanilla Forums and I just can't seem to figure out to select this class <li class="Item Announcement"></li> so that I can style it.

I don't know why it's being so difficult. Why would this not work? 

.Item Announcement {
background-color: #FFF;
{

Upvotes: 0

Views: 95

Answers (6)

dpcasady
dpcasady

Reputation: 1846

Keep in mind that <li class="Item Announcement"></li> is actually two classes. Classes cannot have spaces in their names. You can select this element with either li, .Item, .Announcement, or a combination of all three.

To make sure that you are selecting that exact element, your code should look something like this:

li.Item.Announcement {
    background-color: #fff;
}

Upvotes: 1

kappa
kappa

Reputation: 1569

spaces in class names and id are not allowed, so if you Put a space you are actually writing 2 class names for that item.

Upvotes: 0

Spyros Mandekis
Spyros Mandekis

Reputation: 1024

the space you have in your class name adds two distinct classes in your html element, .Item & .Announcement. You should consider naming your class itemAnnouncement, or if you're not a camel case fan, item-announcement.

If on the other hand you meant to have different classes you can style the one that suits you best, i.e.

.Item {background-color:#fff;}

Upvotes: 0

Alain
Alain

Reputation: 27220

I think your problem is that your class name has a space in it. You probably meant for it to be a single class name - so change it to class="ItemAnnouncement" and .ItemAnnouncement { ... and everything will work.

Upvotes: 1

Starx
Starx

Reputation: 78971

The problem is that with spaces, its is no longer one selector but two, so you need to select using multiple class selector. 

.Item.Announcement {
    background-color: #FFF;
}

Upvotes: 1

j08691
j08691

Reputation: 207861

Try:

li.Item.Announcement {
    background-color: #FFF;
}

That list item has two classes applied to it (Item and Announcement). So to target that with CSS, you need to prefix each class with a period and then remove the spaces. Leaving the spaces in the CSS selector would apply it to a descendant element that had the class.

Quick jsFiddle example.

Upvotes: 6

Related Questions