freeek

А не подходит вам вариант завернуть всё в див ещё один, скажем, вот так:

<div class="content">
    <ul class="list">
        <li>1</li>
        <li>2</li>
    </ul>
    <div class="nodes">
    <div class="node">node-1</div>
    <div class="node">node-2</div>
    <div class="node">node-3</div>
    <div class="node">node-4</div>
    <div class="node">node-5</div>
    <div class="node">node-6</div>
    <div class="node">node-7</div>
    </div>
</div>​

Ну и стили:

.nodes .node {
    background: gray;
}
.nodes .node:nth-child(odd) {
    background: red;
}

Не забываем про codecademy.com! :)

Ну, если любой span в li, то просто:

li span { 

}

Вообще — w3.org.

Лично я пишу двойные, ибо параллельно работаю с PHP, а там часто строки с переменными внутри встречаются.

По-моему, очевидно, что второй вариант читабельнее, да и дописать или изменить определённое свойство куда легче!

А jQuery вам подойдёт? У них много подобных плагинов, например.

Ну а дальше, если такой вариант устроит — гугл вам в помощь :)

Вот вам на выбор. А вывод в две строки сделайте за счёт ширины блоков.