das web ist eh schon zu groß

in diesem workshop stelle ich einige neuerungen in css3 vor. natürlich werde ich hier nicht sämtliche neue funktionen aufgreifen, weshalb ich mich auf funktionen beschränke, die mir bei der täglichen arbeit, dem coden von websites, am meisten helfen. das hauptaugenmerk liegt dabei auf designelementen für die photoshop teils nicht mehr benötigt wird oder varianten die zuvor nur umständlich zu lösen waren und jetzt einfach funktionieren.

bei fast allen vorgestellten techniken mache ich die rechnung ohne den internet explorer. natürlich kann man hier mit workarounds arbeiten, aber, da ja das fehlen von design die funktion nicht beinträchtigt, muss man überlegen wann das sinnvoll ist.

neue selektoren

mit css3 kommen zahlreiche neue und sehr mächtige selektoren mit denen man die absolute codekontrolle hat. die sinnvollsten und vermutlich meistgenutzten selektoren und pseudo-klassen stelle ich in diesem abschnitt kurz vor.
eine übersicht über sämtliche mögliche selektoren findet man außerdem auf der seite des w3c unter http://www.w3.org/TR/css3-selectors/#selectors

alles beginnend mit (…) auswählen

a[href^="http://"] {}

das css wird auf alle links beginnend ^ mit dem attribut http:// angewendet

alles endend mit (…) auswählen

a[href$=".rar"] {}

das css wird auf alle links endend $ mit dem attribut .rar angewendet

jedes element das (…) enthält auswählen

div[id*="footer"] {}
div[class*="footer"] {}

das css wird auf alle id’s oder im zweiten beispiel klassen die footer enthalten angewendet. also auf:


<div id="footerContainer">
<div id="footer">
<div class="footer-column1"></div>
<div class="footer-column2"></div>
</div>
</div>

nicht aber auf: <div id="footerContainer"> (schreibweise)!!!

neue pseudo-klassen

jedes x-te element auswählen

table tr:nth-child(2n){
background-color: #ddd;
}


jedes zweite element auswählen, vom ersten ausegehend:

table tr:nth-child(2n+1){
background-color: #ddd;
}


das letze element auswählen:

table tr:last-child {
background-color: #ddd;
}


das vorletze element auswählen:

table tr:nth-last-child(2){
background-color: #ddd;
}


alles auswählen was nicht klasse (…) ist:

table tr {
background-color: #F00;
}
table tr:not([class*="tr-red"]) {
background-color: #dddd;
}