Assign css to specific element

Question

I have an <li> element on the page that I want to look a certain way. Changing the css affects all the <li> elements.

here is the element I want to change
<li>Outside Job<span class="toggle"<input type="checkbox" /></span></li>

here is my css for the <ul><li>

ul li {
    /*font: normal 17px Helvetica;*/
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;}

The commented out font portion and the color is what I want to affect this <li> and not any others.

How would I do this? Thank you!

Answer 1

If you can set a id or a class on the LI, then it would be trivial..

ul li {
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;
}

ul li.special {
    font: normal 17px Helvetica;
}

<li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>

Aside from that, there is no simple way to do this cross-browser with css alone.

Answer 2

Or use an inline style, STYLE= on the LI itself:

<li style="font: Helvetica; color: #a9a9a9;">...</li>

Answer 3

On a side note you should probably think about adding additional fallback sans-serif fonts to that rule aside from Helvetica. I'm a big fan of that typeface, but most people don't have it on their computers.

EDIT: Someone posted my same answer while I was writing this one. I'll keep the sidenote though because its useful.

Answer 4

Basically, you just need to give it an extra identity/attribute so you can have a CSS selector to style that li tag. Example:

/*using class*/
ul li.different {font: normal 17px Helvetica;}

/*using attribute, title in this case*/
ul li[title=diff] {font: normal 17px Helvetica;}

/*using id if it's one and only*/
#id {font: normal 17px Helvetica;}

Answer 5

As previously said, either a class or id will do it - depending whether you're going to be using this particular style uniquelly for this list item, or plan to use it elsewhere (though you can only use an id once on a page, you can reuse an id on another page).

You can mix and match classes and ids within one list, so that even if you want different styles for each list item in your list you can do it using different classes and ids.

For example, you can have your style that styles your list by default, so that items with no class or id inherit the default style, and then any number of classes and ids that can control the individual items...

<code><pre>
    <ul>
      <li>blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li id "extraspecial">blah blah blah</li>
      <li>blah blah blah</li>
    </ul>
<code></pre>