April 10, 2012
How to target this HTML in CSS?
Question by MotiveKyle
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;
{
Answer by j08691
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.
Answer by Starx
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;
}
