Selektoren

Zurück zur vorherigen Seite:
Kaskadierung & VererbungDas ist der fünfte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.

Information: Selektoren

CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:

strong {
  color: red;
}

In der CSS Terminologie ist die gesamte Zeile eine Regel. Diese Regel beginnt mit strong, welches ein Selektor ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.

Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.

Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.

Zwei Attribute haben einen speziellen Status in CSS. Diese sind class und id.

Class Selektoren

Verwenden Sie das class Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.

Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.

ID Selektoren

Verwenden Sie das id Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.

Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.

<p class="key" id="principal">

.key {
  color: green;
}

#principal {
  font-weight: bolder;
}

Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.

Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.

Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.

Pseudo-classes Selektoren

Eine CSS pseudo-class ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. :hover zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.

Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf  der Navigation (:visited, zum Beispiel), dem Zustand seines Inhalt (wie :checked auf manchen form Elementen) oder der Position des Mauszeigers (wie :hover das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter CSS3 Selectors working spec zu finden.

selector:pseudo-class {
  property: value;
} 

Liste von pseudo-classes

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

Information: Selektoren basieren auf Beziehungen

CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.

Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.

Sie können auch das Symbol * (asterisk) verwenden, welches "jedes Element" bedeutet.

<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...

#data-table-1 td:first-child {
  font-weight: bolder;
}

#data-table-1 td:first-child + td {
  font-family: monospace;
}

Aktion: class und ID Selektoren verwenden

1. Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.
2. Danach setzen Sie ein id und class Attribut auf den ersten Absatz und ein id Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen:

   <!doctype html>
   <html>
     <head>
     <meta charset="UTF-8">
     <title>Sample document</title>
     <link rel="stylesheet" href="style1.css">
     </head>
     <body>
       <p id="first">
         <strong class="carrot">C</strong>ascading
         <strong class="spinach">S</strong>tyle
         <strong class="spinach">S</strong>heets
       </p>
       <p id="second">
         <strong>C</strong>ascading
         <strong>S</strong>tyle
         <strong>S</strong>heets
       </p>
     </body>
   </html>
   

3. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:

   strong {
     color: red;
   }
   
   .carrot {
     color: orange;
   }
   
   .spinach {
     color: green;
   }
   
   #first {
     font-style: italic;
   }
   

4. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen:

   Cascading Style Sheets

   Cascading Style Sheets

   Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.

   Die class Selektoren .carrot und .spinach haben Priorität gegenüber dem tag Selektor strong.

   Der ID Selektor #first hat Priorität gegenüber den class und den tag Selektoren.

Aktion: pseudo-classes Selektoren verwenden

1. Erstellen Sie eine HTML Datei wie folgt:

   <!doctype html>
   <html>
     <head>
     <meta charset="UTF-8">
     <title>Sample document</title>
     <link rel="stylesheet" href="style1.css">
     </head>
     <body>
       <p>Go to our <a class="homepage" href="https://www.example.com/" title="Home page">Home page</a>.</p>
     </body>
   </html>
   

2. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:

   a.homepage:link, a.homepage:visited {
     padding: 1px 10px 1px 10px;
     color: #fff;
     background: #555;
     border-radius: 3px;
     border: 1px outset rgba(50,50,50,.5);
     font-family: georgia, serif;
     font-size: 14px;
     font-style: italic;
     text-decoration: none;
   }
   
   a.homepage:hover, a.homepage:focus, a.homepage:active {
     background-color: #666;
   }
   

3. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen):

   Go to our Home page

Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden

Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel reine CSS Dropdown Menüs zu erstellen (die nur aus CSS ohne JavaScript bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

Angewendet auf eine HTML Struktur wie die folgende:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Sehen sie in das komplette CSS-basierte Dropdown Menü Beispiel für mögliche Hinweise.

Was kommt als Nächstes?

Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um CSS leichter lesbar zu machen.Go to Next Section:
Lesbares CSS