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!

Solution 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.

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

Solution 3

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

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

Solution 4

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.

View more solutions

Comments

[shaiss]

Thank you, that's what I was looking for!

[Steve Gilham]

This is not such a good idea as it couples the content and presentation in the same file -- you can't change the style without editing the content as well.

[ChadNC]

Like Quintin pointed out. You have to set the class attribute for the <li> tag.