CSS3: werken met :nth-child() pseudo class

Mark — Wed, 23 Jun 2010 09:34:51 +0000

Je zou je moeten verheugen op deze CSS3 eigenschap, gedaan met Javascript of PHP of elke andere programmeertaal om dynamisch elementen te kunnen aanspreken.
Maar ingewikkeld kan deze eigenschap wel zijn, dus hier enkele voorbeelden die je allicht op weg kunnen helpen:

CSS3

odd/even

Waarschijnlijk de meest gebruikte en verwachte mogelijkheid

 /*elke 1ste - 3de - 5de - 7de etc ... */
li:nth-child(2n+1) { color: #333; }
li:nth-child(odd) { color: #333; }
 /*elke 2de - 4de - 6de - 8de etc ... */
li:nth-child(2n) { color: #333; }
li:nth-child(even) { color: #333; }

Enkel de eerste

li:nth-child(0n+1) { color: #333; }
li:nth-child(1) { color: #333; }

Enkel de eerste 3 bijvoorbeeld

li:nth-child(-n+3) { color: #333; }

Nog meer verwarrende voorbeelden

 /*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n) { color: #333; }

 /*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n+4) { color: #333; }

 /*de 1ste - 5de - 9de - 13de etc ... */
li:nth-child(4n+1) { color: #333; }

 /*de 3de - 8ste - 13de - 18de etc ... */
li:nth-child(5n-2) { color: #333; }

Browser compatibility

De meeste moderne browsers ondersteunen deze eigenschap reeds, en om IE te laten gehoorzamen naar deze regel, gebruik Jquery, deze ondersteund de regel in zijn selectors lijst, en het zal werken in IE.

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS opacity

Mark — Mon, 02 Feb 2009 17:24:27 +0000

Crossbrowser opacity, het is mogelijk, maar momenteel moeten we nog steeds elke browser apart aanspreken.

HTML


 Pellentesque habitant morbi tristique senectus et netus et

CSS

.my-opacity {
    border: 1px solid #000;
    margin: 0 auto;
}
.my-opacity p {
    filter:alpha(opacity=30); /* msie */
    -moz-opacity: 0.30; /* firefox 1.0 */
    -khtml-opacity: 0.30; /* webkit */
    opacity: 0.30; /* css 3 */
    background-color: #000;
    color: #fff;
    margin: 0;
    zoom: 1;/* for msie */
    padding: 10px;
}