Arbeitshilfen
Formatierungen für Formulare
- CSS3 - Selektoren
- Formatierungen für Formulare
- Browserunterstützung
Das ist ein schönes Beispiel für die neu in CSS3 eingeführte Pseudoklasse :target, mit der Sie das Ziel von Verweisen kenntlich machen können. Eine helle Hintergrundfarbe (wie bei Wikipedia) ist sicher eine gute Wahl als Hervorhebung.
Formatierungen für Formulare
Gehen wir noch näher auf CSS3-Pseudoklassen ein. Drei neue Pseudoklassen sind für die verschiedenen Zustände von Formularelementen vorgesehen:Über :enabled wählen Sie aktivierbare Elemente aus, über :disabled Elemente, die nichtaktivierbar sind. Schließlich können Sie über die Pseudoklasse :checked angeklickte Checkboxen oder Radiobuttons auswählen. Nehmen wir das folgende deaktivierte Textfeld:
<input type="text" disabled=
"disabled" name="ergebnis" />
Dieses deaktivierte Element können Sie beispielsweise über folgende Angabe halb transparent machen:
input[type="text"]:disabled {
opacity: 0.5;
}
Total pseudo
:nth-child(), :target oder :disabled sind allesamt neue Pseudoklassen. Daneben gibt es in CSS auch die Pseudoelemente wie :first-line, um die erste Zeile anzusprechen, oder :first-letter, um den ersten Buchstaben gesondert zu formatieren. Auch :after oder :before, die im Zusammenhang mit der CSS-Eigenschaft content zur Einfügung von erzeugten Inhalten dienen, gehören zu den Pseudoelementen.
CSS3 führt keine neuen Pseudoelemente ein. Damit Pseudoelemente jedoch formal besser von Pseudoklassen unterschieden werden, sieht das W3C vor, dass Pseudoelemente mit doppelten Doppelpunkten geschrieben werden, also etwa ::first-line oder ::after. Da dies jedoch browserübergreifend noch nicht so gut unterstützt wird, bleiben Sie vorerst besser bei der klassischen Schreibweise mit nur einem Doppelpunkt.
Mehr Attributselektoren
Attributselektoren wurden in CSS2 eingeführt. Damit können Sie Elemente auswählen, wenn diese bestimmte Attribute oder ihre Attribute bestimmte Eigenschaften haben. In CSS2 sind bereits mehrere Attributselektoren definiert, etwa
- element[attribut] wählt element aus, sofern es ein Attribut mit Namen attribut besitzt.
- element[attribut="wert"] wählt element aus, sofern es ein Attribut mit Namen attribut und mit Wert wert hat. Das ist sehr praktisch bei der Arbeit mit Formularen: Über input[type="text"] können Sie Formatierungen auf die Textfelder beschränken. Hingegen würde der Selektor input alleine ja auch Checkboxes oder Radiobuttons auswählen.
- element[attribut~="wert"] wählt die Elemente aus, die ein Attribut besitzen, das eine durch Leerzeichen getrennte Liste von Werten enthält, von denen einer genau mit wert übereinstimmt.
- element[attribut|="wert"] wählt die Elemente aus, die ein Attribut besitzen, das einen Wert enthält, der mit dem angegebenen Wert, gefolgt von einem Bindestrich, beginnt. Von den hier vorgestellten Selektoren sind die letzten beiden etwas kryptisch und ihre Notwendigkeit ist auf den ersten Blick auch nicht ganz einleuchtend. Eindeutig praktisch sind hingegen die in CSS3 eingeführten Attributselektoren. Damit können Sie Teilübereinstimmungen bei Attributen feststellen.
- element[attribut^="wert"] wählt die Elemente aus, die ein Attribut besitzen, das mit dem bei wert angegebenen Text beginnt. Damit kann man beispielsweise ohne großen Aufwand alle Links auf externe Adressen auswählen.
a[href^="http://"], a[href^=
"https://"]{
/* Formatierung für externe Links */
}
Über die CSS-Eigenschaft content können Sie dann zusätzliche Inhalte vor den Links ergänzen. Im Beispiel soll davor ein kleiner Pfeil nach rechts und ein Leerzeichen ergänzt werden:
a[href^="http://"]:before,
a[href^="https://"]:before {
content: "\2192\00A0";
}
Wenn Sie Zeichen wie im Beispiel ergänzen, so benötigen Sie deren Hexadezimalcode. Der Pfeil nach rechts hat den Unicodewert in hexadezimaler Form #x2192. Bei der Verwendung als erzeugten Inhalt löschen Sie #x und schreiben stattdessen davor einen Backslash.Unser Tipp: Falls Sie lediglich den Dezimalcode Ihres Zeichens vorliegen haben, können Sie diesen mit dem Standard-Windowsrechner in Hexadezimalcode umrechnen, wenn Sie auf die wissenschaftliche Ansicht umschalten.Über den CSS3-Attributselektor element[attribut$="wert"] wählen Sie dagegen Elemente aus, die ein Attribut besitzen, das mit dem bei wert angegebenen Text endet. Das ist praktisch, wenn Sie Verweise auf HTML- und andere Dateien unterschiedlich markieren wollen:Durch den folgenden Code werden Verweise auf pdf-Dokumente mit einem kleinen Icon versehen.
a[href$=".pdf"] {
background: url(pdficon.png) norepeat;
padding-left: 10px;
}
Der dritte neue Attributselektor element[attribut*="wert"] findet Übereinstimmungen, wenn wert irgendwie im Attributwert vorkommt.
