Text align right only with CSS in UL LI

Question

I have html:

<ul>
    <li><span>text</span><span>to right</span></li>
        <li><span>text2 text2 text2 </span><span>to right</span></li>
        <li><span>text3</span><span>to right</span></li>
        <li><span>text4</span><span>to right</span></li>
        <li><span>text5text5text5</span><span>to right</span></li>
</ul>

and css:

ul li {
    width: 300px;
    background-color: #ff9999;
}

i would like make text-align to right for all second span in li, but i can't modify html structure. I can only add class or id. Is possible to make with only CSS?

jsfiddle

Answer 1

You could float them instead:

ul li span+span {
    float: right;
} 

http://jsfiddle.net/ePcDq/1/

Answer 2

You can try with :nth-child pseudo selector to select the second child ie span and can put your css.

ul li span:nth-child(2)
{
    float:right;
}

Js Fiddle Demo

Answer 3

您可以在第二个跨度中添加一个类，并在该类中添加float：right 。

Answer 4

You can add a class to span eg

<span class='right'>to right</span

and define right class as

.right{
    float:right;
}

See jsFiddle in action