How to target this HTML in CSS?

Tags: html,css

Problem :

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;

Solution :


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.

    CSS Howto..

    How to tell google bot to skip part of HTML?

    How do you associate a css/sass stylesheet to a view in rails?

    How to changing css on bootstrap button Group

    how to toggle image in HTML-CSS? [duplicate]

    How to make the newly appended html code keep the original css style?

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How to force style HTML element?

    How to style Accelerator display text in JavaFX ContextMenu via CSS?

    Understanding how menus work in html5 and css3

    How to get element position relative to parent?

    How can I push to the top an element using slideUp?

    Show content only in printing page not in browser page using CSS or javascript

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    How to make fixed navbar top like w3school

    How to Slant/Skew only the bottom of the div

    iOS not showing element on right: 0/float: right

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    What is the correct css for the list of results to show correctly in this situation? [closed]

    How do I modify IE Gradient CSS to use height and a third color?

    How to display a div next to another div with no width defined?

    How to use several css classes to one element?

    How to get css value of an element inside array?

    How to center video source in circle shape using css, html

    How to limit a to only three lines?

    How to change class of all children with jquery?

    How to make specific areas in a div clickable with css / js / anything

    How to use Bootstrap 3 gradient for background in CSS? [closed]

    How to make selected file name visible?

    How to reject specify HTML tags by using css or xpath selector

    How to stop web content from being displayed before css/jquery is prepared?