Targeting class names with spaces in CSS

I just came across one of those problems where  the fix doesn’t seem too well documented online, so thought I’d share.

I was trying to target a class name, in Twitter as it happens. The div appears like this in the source:

 <div class=”bulletin info”>Twitter will have a maintenance window on Nov. 17th at <a href=”http://www.timeanddate.com/worldclock/fixedtime.html?month=11&day=17&year=2009&hour=23&min=0&sec=0&p1=224
“>11p Pacific</a></div>

But look, that class name has a space ‘bulletin info’. How do we target it?

I tried using %20 in place of  the space, it didn’t work.

.bulletin%20info {
color: red;
}

I tried Google, no luck. I tried twitter, in particular my good friend @KenJokol. He said simply:

It’s .bulletin.info

And he was right! To my knowledge that would only have targeted a div of class name info within a div of class name bulletin, but no, this seems to be a perfectly valid (or working at least) way of doing it.

Advertisements
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

6 Responses to Targeting class names with spaces in CSS

  1. Matt says:

    Just so you know, it might be useful some day, the class name doesn’t have a space : It’s two different classes with a space separating them. So by using .bulletin.info you’re targeting any element with both classes.

  2. Anonymous says:

    Ah I see.

  3. Anonymous says:

    Thanks. Just what I’m looking for

  4. jb says:

    thx it works 🙂

  5. Ricky Meaner says:

    Thank you so much

  6. NYMediaExec says:

    You rock.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s