Cosas de CSS que se pueden aprender en 30 segundos

Muy útil el sitio web 30 Seconds of CSS.

Por ejemplo, ¿cómo truncar una línea de texto para poner al final una elipsis?

HTML:

<p class=”truncate-text”>If I exceed one line’s width, I will be truncated.</p>

CSS:

.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}

¿Cómo hacer una lista con diseño de color zebra?

HTML:

<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ul>

CSS:

li:nth-child(odd) {
background-color: #eee;
}