CSS +

24/08/2010

Je kunt heel eenvoudig opeenvolgende elementen stijlen met css. Dit doe je simpelweg door het + teken te gebruiken.

/* nav */
ul#nav li {color:#fff; float: left; margin:0px 20px 0px 0px;}
ul#nav li + li + li {margin:0;}

Het derde element heeft nu geen marge.

Je kunt dit ook gebruiken voor het stylen van tabellen die worden binnengeharkt via een feed, of om de eerste paragraaf na een heading vet te maken.

/* table */
td {width:100px;}
td + td {width:50px;}
td + td + td {width:100px;}

De eerst en derde cel zijn 100 pixels breed, de tweede 50 pixels.

/* text */
h1 {font-size:24px;}
h1 + p {font-weight: bold;}

Iedere eerste paragraaf na een h1 wordt bold gemaakt, de volgende niet.

Handig! En het werkt ook in IE.

Nog geen reacties.

Reageer: