shaiss shaiss - 2 months ago 6
CSS Question

Assign css to specific element

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

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.