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

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