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;
}

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!