Arten von Selektoren

Ok, fangen wir mit den üblichen Verdächtigen an.

1. Tag {
2. color: red; 3
3. }
4. .Klasse {
5. color: blue;
6. }
7. Tag#ID {
8. color: green;
9. }

Attributs-Selektoren

Dann gibt es aber auch noch Attributes-Selektoren. Viel Tags unterscheiden sich ja durch die Verwendung von Attributen und genau diese Unterscheidungen kann man auch in CSS nutzen.

Das erste Beispiel formatiert alle -Tags mit einem titel-Attribute

1. a[title] {
2. color: red;
3. }

Das nächste Beispiel formatiert alle <a>-Tags mit dem rel-Attribute und dem Wert copyrigth blau.

1. a[rel=copyright] {
2. color: blue;
3. }

Im dritten Beispiel werden die <a>-Tags grün formatiert, die im lang-Attribute den Wert en stehen haben. Dabei kann der Wert in einer durch Leerzeichen getrennten Liste stehen.

1. a[lang~=en] {
2. color: green;
3. }

Das folgende Beispiel formatiert alle <a>-Tags die im href-Attribute mit mailto beginnen.

1. a[href|=mailto:] {
2. color: yellow;
3. }

Das letzte Beispiel zeigt wie <a>-Tags grau formatiert werden, die im href-Attribute mit dem Wert .pdf enden.

1. a[href^=.pdf] {
2. color: grey;
3. }

Nachbarn, Kinder und Nachfahren

Weiter Möglichkeiten ohne Klassen und IDs gezielt auf Tags zu zugreifen besteht darin Kombinationen der oben beschriebenen Möglichkeiten zu nutzen.

Fangen wir mit den Nachfahren an. Kombiniert man zwei Selektoren mit einem Leerzeichen dann trifft diese Formatierung auf alle Elemente zu die unterhalb des erst genannten Elements sich befinden, egal in welcher Hierarchie-Ebene. Im Beispiel werden alle Verlinkungen in einer ungeordneten Liste rot formatiert, egal ob sie in Unterlisten ober auf der obersten Ebene liegen.

1. ul a {
2. color: red;
3. }

Kindern sind die direkten Nachfahren von Elementen. Das Beispiel zeigt wie die direkt in <div>-Tags eingebunden sind umrandet werden, nicht aber Bilder in einem Absatz innerhalb eines <div>-Tags.

1. div > img {
2. border: thin solid black;
3. }

Bei Nachbarn kann das folgenden Element eines Elementes formatieren, hier ist es der erste Absatz nach einer Überschrift.

1. h3 + p {
2. boder: thin dashed darkred;
3. }

Pseudo-Klassen

CSS bietet auch schon vorgegebene Klassen um schnell auf Elemente in der HTML-Seite zugreifen zu können. Dabei beschränkt sich die Selektion nicht nur auf die reine Struktur, sondern auch auf Zustände bzw. Interaktivität.

Zum Beispiel kann man mit der Pseudo-Klasse :first-child das erste Kind eines Elementes formatieren. Im Beispiel bekommt das erste Kind, also der erste Listeneintrag einen Rahmen an der Oberseite.

1. ul:first-child {
2. border-top: thin solid black;
3. }

Man kann aber auch die Zustände von Verlinkungen durch :link und :visited unterschiedlich darstellen.

1. a:link {
2. color: blue;
3. }
4. a:visited {
5. color: purpel;
6. }

Aber nicht nur Zustände von Verlinkungen, sondern auch Interaktivität des Benutzers kann man über CSS darstellbar machen. Das Beispiel zeigt Verlinkungen bei ihrer Aktivierung rot, Eingabefelder bei ihrer Fokusierung mit einer roten Umrandung und Tabellenzeilen beim Drüberfahren mit hellgrauen Hintergrund an.

1. a:active {
2. color: red;
3. }
4. input:focus {
5. boder: thin solid red;
6. }
7. tr:hover {
8. background-color: silver;
9. }

Zusätzlich gibt gibt es auch eine Sprach-Klasse :lang. Dort kann man Formatierungen definieren die durch das lang-Attribut bestimmt werden.

1. blockquote:lang(de) > p {
2. quotes: ‘»’ ‘«’ ‘2039′ ‘203A’
3. }

Pseudo-Elemente

Neben den Pseudo-Klassen existieren in CSS auch sogenannte Pseudo-Elemente.

1. p:first-line {
2. color: red;
3. }
4. p:first-letter {
5. font-size: 2em;
6. }
7. li:before {
8. content: ‘►’;
9. }
10. a:after {
11. content: ‘ [’ attr(href) ‘]’:
12. }

In dem letzen Beispiel werden die verschiedenen Pseudo-Elemente aufgelistet. Dazu zählt unter anderem :first-line welches die erste Zeile des Elementes, hier eines Absatzes, formatiert. Mit :first-letter kann der erste Buchstabe eines Elementes gesondert formatiert werden.

Die beiden letzten Formatierungen zeigen jeweils vor bzw. hinter dem Element Inhalt an, der aber nicht im Quellcode vorhanden ist. Ein besondere Form, die gut im Ausdruck verwendet werden kann, liegt bei der Formatierung des Links vor. Hier wird nach jeder Verlinkung der Wert des href-Attributs in eckigen Klammern angezeigt.

Ausblicke

Ab CSS 3 wird die Selektierung von Elementen noch differenzierter. Hier einmal eine Auflistung der zusätzlichen Möglichkeiten:

• Attributs-Selektoren
  • E[foo^="bar"] an E element whose “foo” attribute value begins exactly with the string “bar”
  • E[foo$="bar"] an E element whose “foo” attribute value ends exactly with the string “bar”
  • E[foo*="bar"] an E element whose “foo” attribute value contains the substring “bar”
  • E[hreflang|="en"] an E element whose “hreflang” attribute has a hyphen-separated list of values beginning (from the left) with “en”
• Pseudo-Klassen
  • E:root an E element, root of the document
  • E:nth-child(n) an E element, the n-th child of its parent
  • E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
  • E:nth-of-type(n) an E element, the n-th sibling of its type
  • E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
  • E:last-child an E element, last child of its parent
  • E:first-of-type an E element, first sibling of its type
  • E:last-of-type an E element, last sibling of its type
  • E:only-child an E element, only child of its parent
  • E:only-of-type an E element, only sibling of its type
  • E:empty an E element that has no children (including text nodes)
  • E:target an E element being the target of the referring URI
  • E:enabled
  • E:disabled a user interface element E which is enabled or disabled
  • E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
  • E::selection the portion of an E element that is currently selected/highlighted by the user
  • E:not(s)an E element that does not match simple selector s
• Kombination
  • E ~ F an F element preceded by an E element

Ähnliche Beiträge

• Icons helfen bei der Orientierung
• HTML5 – Buch
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS

Ja, ja, ich weiß das die nicht alle Browser dieses Feature unterstützen. Besonders der heutzutage noch oft verwendete Internet Explorer 6 macht dem Ganzen einen großen Strich durch die Rechnung. Aber warum müssen deswegen die Benutzer von neueren Browsern darauf verzichten? OK Schluss mit mit dem leidigen Thema der verschiedenen Browser-Versionen. Auf zu der Formatierung von schönen, manchmal auch bunten Verlinkung.

1. a[href$=".pdf"],
2. a[href$=".txt"],
3. a[href$=".zip"],
4. a[href$=".mp3"], a[href$=".wma"],
5. a[href$=".mpg"], a[href$=".mpeg"],a[href$=".wmv"],
6. a[href$=".swf"],
7. a[href$=".xls"], a[href$="ods"],
8. a[href$=".doc"], a[href$="odt"],
9. a[href*="rss2"], a[href*="rss"], a[href*="feed"],
10. a[href|="mailto:"], a[href|="skype:"], a[href|="msnim:"],
11. {
12. padding-bottom:2px;
13. padding-left:22px;
14. padding-top:2px;
15. background:transparent;
16. }

Als erstes habe ich nur alle relevanten Links mit einem Innenabstand versehen und die Hintergrundfarbe auf transparent gestellt. Dabei bedeutet der Selektor mit dem Dollarzeichen ($) z.B. das alle Links die im href-Attribut mit dem angegebenen Wert enden formatiert werden. Bei der Schreibweise mit dem Stern (*) sucht man irgend ein Vorkommen des Wertes und die Kombination mit dem Pipe (|) selektiert nur Links die mit den Wert beginnen.

1. a[href$=".pdf"]
2. {
3. background: url(images/acrobat.png) no-repeat scroll left center;
4. }
5. a[href$=".txt"]
6. {
7. background: url(images/text.png) no-repeat scroll left center;
8. }
9. a[href$=".zip"]
10. {
11. background: url(images/archive.png) no-repeat scroll left center;
12. }
13. a[href$=".mp3"], a[href$=".wma"]
14. {
15. background: url(images/audio.png) no-repeat scroll left center;
16. }
17. a[href$=".mpg"], a[href$=".mpeg"], a[href$=".wmv"]
18. {
19. background: url(images/video.png) no-repeat scroll left center;
20. }
21. a[href$=".swf"]
22. {
23. background: url(images/flash.png) no-repeat scroll left center;
24. }
25. a[href$=".xls"], a[href$=".ods"]
26. {
27. background: url(images/table.png) no-repeat scroll left center;
28. }
29. a[href$=".doc"], a[href$=".rtf"], a[href$=".odt"]
30. {
31. background: url(images/document.png) no-repeat scroll left center;
32. }
33. a[href*="feed"], a[href*="rss"]
34. {
35. background: url(images/feed.png) no-repeat scroll left center;
36. }
37. a[href|="mailto:"]
38. {
39. background: url(images/mail.png) no-repeat scroll left center;
40. }
41. a[href|="skype:"]
42. {
43. background: url(images/skype.png) no-repeat scroll left center;
44. }
45. a[href|="msnim:"]
46. {
47. background: url(images/messenger.png) no-repeat scroll left center;
48. }

Danach definiere ich für jede Verlinkungsart ein Hintergrundbild, welche sind nicht wiederholt, die Ausrichtung links mittig ist und nicht mitscrollt. Fertig ist die schöne, bunte Linkwelt. Und das super Gute daran ist, dass Browser die diese Art der Selektierung nicht kennen einfach ihren gewohnten Standard zeigen und alle zufrieden sind.

Zum Schluss hier nochmals die Dateien zum Download:

• CSS-Datei
• Icons als Zip-Datei

Ähnliche Beiträge

• CSS 3-Unterstützung der Browser
• Suchmaschinenoptimierung (SEO)
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes

Eine sinnvolle und immer wiederkehrende Beschriftung von Container man natürlich nicht nur beim Arbeiten in einem Team, sondern bringt auch für einen selbst mehr Sicherheit. Dabei sollte immer darauf geachtet werden den HTML-Code nicht unnötig aufzublähen. Gerade im mobilen Web sind kline Datenmengen Gold wert.

Welche Komponenten können bei einem Weblayout vorkommen?

Da wäre wohl als erstes der Kopfbereich einer Website zu nennen. Dann gibt es auf jeden Fall noch die Navigationen, natürlich den eigentlichen Inhalt und als Abschluss benutzen viel Designer einen Fußbereich. Jeder von diesen Bereichen besitzt dann natürlich noch Unterbereiche.

Doch bevor ich die einzelnen Bereiche definiere, lege ich einen <div>-Container mit einem id-Attribute an, um die gesamte Markup besser koordinieren zu können.

Kopfbereich

Fangen wir mal mit dem Kopfbereich an. Hier sollte die allgemeinen, aber wichtigsten Information bezüglich der Website stehen. Das wäre dann wohl der Website-Titel und die Tagline. Diese kennzeichne ich immer mit den <h1>- und <h2>-Tags, um ihre Wichtigkeit zu verdeutlichen. Die Tagline, also der Untertitel der Website hat in den meisten Fällen irgendetwas mit einer Aussage zu tun, weswegen ich dafür oft den <blockquote>-Tag benutze. Auch könnte hier schon eine erste Aufzählung der Bereiche der Website aufgelistet werden. Meist werden diese Bereiche auch noch mit verlinkt. Über den Kopfbereich bekommt die einzelne HTML-Seite seine Markierung zu welcher Website sie gehört. Man nennt das auch das Branding.

Navigationen

Auf einer HTML-Seite gibt es verschiedene Navigationen, weshalb ich sie immer mit einem class-Attribute zusammenfasse. Trotzdem hat jede Navigation ihre eigene Semantik und deshalb erweitere ich jede Navigation mit einem id-Attribute. Doch welche Tags benutze ich bei den verschiedene Navigationen? Das kommt ganz auf ihren Inhalt an.

Um bei einer Sprachsteuerung bzw. einem PDA-Design schnell an die richtigen Stellen zu springen beginnt bei mir jeder <body>-Tag mit einer Skip-Navigation hier verwende ich oft eine unsortierte List, da ja auch der Inhalt der Liste keiner bestimmten Sortierung folgt.

Auch die Servicenavigation, wo es die Möglichkeit gibt schnell zur Kontaktseite, zum Impressum bzw. zum Inhaltsverzeichnis zu springen, folgt keiner bestimmten Reihenfolge, weswegen ich auch da einen <ul>-Tag bevorzuge.

In der Pfadnavigation wird symbolisch der Weg nach oben zur Homepage definiert. Um die Verschachtelung auch semantisch richtig zu definieren reicht eine unsortierte, in sich verschachtelte Liste mit immer nur einem Eintrag pro Ebene.

Die Bereichsnavigation hat natürlich immer ein bestimmte Reihenfolge, auch wenn der Benutzer nicht unbedingt diese befolgen muss. Deshalb kann es nur eine sortierte Liste sein.

Auch sollte am Ende eines jeden Inhaltes die Verweise in einer Liste nochmals zusammengefasst werden. Hier kann man wunderbar das Auftauchen im Text als Sortierung der Fußnoten in einer sortierten Liste mit einem <ol>-Tag nutzen.

Alle weiteren Navigationen, wie z.B. die Sprachauswahl, sind dann fast immer unsortiert und somit eignet sich der <ul>-Tag ideal dafür.

Inhalt

Leider würde es den Rahmen des Artikels sprengen, wenn alle möglichen Arten von Inhalten aufzählen würde. Vielleicht werde ich darüber später einen separaten Artikel schreiben. Deshalb an dieser Stelle nur soviel, idealer Weise fasst man diesen Bereich mit einem <div>-Container zusammen um gezielt Formatierung nur dort anbringe nur können.

Fußbereich

Im Fußbereich können Kontaktangaben bzw. rechtliche Hinweise oder auch eine weitere Servicenavigation untergebracht werden. Um die unterschiedlichsten Contaner ideal zusammenzufassen lohnt sich wiederum ein <div>-Container.

Beispiel

1. <body dir="ltr">
2. <div id="page">
3. <ul id="skip" class="navigation">
4. <li><a href="#area">Navigation</a></li>
5. <li><a href="#content">Inhalt</a></li>
6. <li><a href="#service">Service</a></li>
7. <li><a href="#footer">Adressangabe und rechlicher Hinweis</a></li>
8. </ul>
9. <div id="branding">
10. <h1>Websitetiel</h1>
11. <h2>Tagline</h2>
12. <ol id="area" class="navigation">
13. <li><a href="#">Hauptkategorie</a></li>
14. <li><a href="#">Hauptkategorie</a>
15. <ol>
16. <li><a href="#">Unterkategorie</a></li>
17. <li><a href="#">Unterkategorie</a></li>
18. </ol>
19. </li>
20. <li><a href="#">Hauptkategorie</a>
21. <ol>
22. <li><a href="#">Unterkategorie</a>
23. <ol>
24. <li><a href="#">Unterkategorie</a></li>
25. <li><a href="#">Unterkategorie</a></li>
26. </ol>
27. </li>
28. <li><a href="#">Unterkategorie</a></li>
29. </ol>
30. </li>
31. </ol>
32. </div>
33. <div id="body">
34. <ul id="path" class="navigation">
35. <li><a href="#">Startseite</a>
36. <ul>
37. <li><a href="#">Hauptkategorie</a>
38. <ul>
39. <li>Unterkategie</li>
40. </ul>
41. </li>
42. </ul>
43. </li>
44. </ul>
45. <div id="content">
46. <h2>Seitentitel</h2>
47. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus ligula non nisi. Proin mauris ligula, dignissim vitae, aliquet at, luctus eu, nisl. Aliquam eget justo non augue adipiscing pretium. Vestibulum eget lacus eget massa varius viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mi. Donec et justo id erat pulvinar lobortis. Suspendisse faucibus, risus sed dictum viverra, orci sapien malesuada arcu, pharetra aliquet ligula libero sit amet magna. Sed non neque. Aliquam mi. Cras in tortor. Nunc feugiat. Aliquam dolor pede, tristique et, accumsan id, semper eget, sapien. Proin non metus nec arcu sollicitudin gravida. Vestibulum feugiat tristique velit. Vestibulum tincidunt nisl a nisl. Ut feugiat pede nec tortor.</p>
48. <p>Suspendisse adipiscing euismod metus. Ut in urna. Sed tortor. Phasellus pellentesque turpis ornare tortor. Praesent ac nunc. In hac habitasse platea dictumst. Ut pulvinar tempor leo. Aenean dignissim, enim vel tristique adipiscing, enim mauris porta nisl, eget faucibus risus massa ac ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque quis nisl non neque ornare vulputate.</p>
49. <h3>Hauptüberschrift</h3>
50. <p>Pellentesque suscipit odio at sapien. Nullam iaculis vehicula augue. Aenean sodales viverra massa. In in leo. Morbi venenatis ullamcorper ipsum. Aliquam lobortis, eros quis pulvinar porta, felis libero sodales enim, sit amet placerat tortor felis nec sem. Integer dapibus ultrices quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis accumsan. Fusce ac ligula.</p>
51. <h4>Unterüberschrift</h4>
52. <p>Phasellus pellentesque massa at turpis. Vestibulum libero orci, fringilla sit amet, tempus sed, imperdiet vitae, nunc. Sed mollis elit at arcu. Proin euismod porttitor urna. Sed vitae tortor. Maecenas et nisi vitae pede tincidunt lacinia. Vestibulum adipiscing pede porttitor diam. Curabitur eleifend justo quis purus. Duis pretium dui sed elit. Cras laoreet lorem a ipsum.</p>
53. <p>Sed cursus facilisis metus. Vestibulum placerat, eros porta euismod aliquam, lorem velit hendrerit ligula, posuere tempor metus nisl nec arcu. Aliquam quis purus. Sed orci. Donec tincidunt posuere lorem. Aliquam ultricies turpis vitae diam. Maecenas eleifend mi in ante. Mauris commodo lorem quis lacus. Phasellus semper scelerisque nunc. Suspendisse sollicitudin odio in nisi.</p>
54. <h6>weiterführende Links</h6>
55. <ol id="footnote" class="navigation">
56. <li><a href="#">Fußnote</a></li>
57. <li><a href="#">Fußnote</a></li>
58. <li><a href="#">Fußnote</a></li>
59. </ol>
60. </div>
61. </div>
62. <ul id="service" class="navigation">
63. <li><a href="#">Kontakt</a></li>
64. <li><a href="#">Impressum</a></li>
65. <li><a href="#">Inhaltsverzeichnis</a></li>
66. </ul>
67. <div id="footer">
68. <p>Adressangabe und rechtlicher Hinweis</p>
69. <p><a href="#page">nach oben</a></p>
70. </div>
71. </div>
72. </body>

Download der Dateien

• HTML-Datei

Ähnliche Beiträge

• Deutendes Design der Inhalte
• CSS Layouts am Fließband
• flexible Layouts mit CSS
• CSS Import macht Probleme
• Jahresabonnement des Spotlight Verlag