CSS3 esimerkkejä

:first-child ja :last-child

:nth-child(number)

:nth-child(odd)

:nth-child(even)

:nth-child(3)

:focus

Linkki 1, Linkki 2, Linkki 3

Lohkojen ominaisuuksia

CSS3:lla saa esimerkiksi lohkoihin pyöristetyt reunat ja varjostuksia. Vanhoissa selaimissa kaikki ominaisuudet eivät kuitenkaan toimi. Yleisimpien selainten (Edge, Firefox, Opera, Safari, Chrome) uusimmissa versioissa tuki on kuitenkin pääsääntöisesti jo erittäin hyvä.

Sarakelayout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mattis gravida. Mauris a mi libero, a fringilla lectus. Nunc fermentum auctor dolor nec cursus. Duis ligula sem, rhoncus in sodales at, gravida in nulla. Sed dolor mi, posuere id feugiat et, malesuada non ligula.

Duis bibendum metus eget tortor facilisis sit amet elementum erat laoreet. Nam sit amet lorem vitae sapien egestas dapibus et sed mi. Aliquam neque purus, facilisis eget auctor ac, convallis a elit. Cras vestibulum ultricies tortor, in molestie dolor blandit in. Maecenas nisl risus, tempus eget rhoncus nec, euismod in metus. Aenean luctus interdum mi, nec ornare libero gravida sit amet. Phasellus vitae iaculis velit.

display: flex

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mattis gravida. Mauris a mi libero, a fringilla lectus. Nunc fermentum auctor dolor nec cursus. Duis ligula sem, rhoncus in sodales at, gravida in nulla. Sed dolor mi, posuere id feugiat et, malesuada non ligula.

Duis bibendum metus eget tortor facilisis sit amet elementum erat laoreet. Nam sit amet lorem vitae sapien egestas dapibus et sed mi. Aliquam neque purus, facilisis eget auctor ac, convallis a elit. Cras vestibulum ultricies tortor, in molestie dolor blandit in. Maecenas nisl risus, tempus eget rhoncus nec, euismod in metus. Aenean luctus interdum mi, nec ornare libero gravida sit amet. Phasellus vitae iaculis velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mattis gravida. Mauris a mi libero, a fringilla lectus. Nunc fermentum auctor dolor nec cursus. Duis ligula sem, rhoncus in sodales at, gravida in nulla. Sed dolor mi, posuere id feugiat et, malesuada non ligula.