CSS-Beispiel: Klassenselektor

====== Selektoren ====== Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren. Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern. Beispiel


Selektor {
 /* CSS-Deklarationen 
   z.B: font-color: blue;
 */ 
}

===== Typselektor ===== Der Element- bzw. Typselektor besteht aus dem Namen des Elements, das angesprochen werden soll. Mit diesem Selektor werden alle Elemente eines Typs angesprochen.


h1 { 
  color: red; 
}
h1, h2 { 
  background-color: #ccc;
  border-radius: .5em; 
}

Der erste Regelsatz besteht aus einem Selektor h1, der allen h1-Elementen die Textfarbe rot zuweist. Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, die alle Überschriften vom Typ h1 und h2 anspricht. {{:inf:inf5ai_202324:07_webentwicklung:7_04:pasted:20240911-052550.png}} ===== Klassenselektor ===== Ein Klassenselektor spricht Elemente an, die einer bestimmten Klasse zugehörend sind. Welche Elemente das sind, hängt von der verwendeten Auszeichnungssprache ab. In HTML-Dokumenten werden Klassen über das class-Attribut vergeben. Ein Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.




  
    
    CSS-Beispiel: Klassenselektor
    
  
  
    Dieser Absatz gehört zur Klasse beispiel und seine
                        Schrift wird deshalb kursiv dargestellt.
    Dieser Absatz gehört sowohl zur Klasse beispiel 
                                als auch zur Klasse hinweis und sein Text wird deshalb grün und 
                                kursiv dargestellt.
    Dieser Absatz gehört nur zur Klasse hinweis. 
                       Für diese Klasse sind keine Styleangaben notiert.
  



{{:inf:inf5ai_202324:07_webentwicklung:7_04:pasted:20240911-052650.png}}

In diesem Beispiel wird der Text des ersten und zweiten Absatzes kursiv dargestellt, da beide Absätze zur Klasse „beispiel“ gehören. Klassenselektoren können mit anderen Selektoren verbunden werden, um genauer festzulegen, welche Elemente angesprochen werden sollen. Im Beispiel erhält der zweite Absatz eine grüne Schriftfarbe, da das Absatzelement sowohl der Klasse „beispiel“ als auch der Klasse „hinweis“ zugeordnet ist.

Sie können den Klassenselektor auch mit dem Typselektor verbinden, die Schreibweise lautet dann „elementname.klassenname“. Auf diese Weise sprechen Sie nur die Elemente an, bei denen Element- und Klassenname mit den Angaben des Selektors übereinstimmen. Die Kombination Universal- und Klassenselektor („*.klassenname“) ist ebenfalls möglich, aber identisch zur einfachen Schreibweise.

==== Beachte: ====
  * .beispiel.hinweis selektiert Elemente, die der Klasse „beispiel“ und „hinweis“ angehören;
  * .beispiel, .hinweis selektiert Elemente, die der Klasse „beispiel“ oder „hinweis“ angehören (siehe von einander unabhängige Selektoren)
  * .beispiel .hinweis selektiert Elemente, die der Klasse „hinweis“ innerhalb der Klasse „beispiel“ angehören. (siehe Nachfahrenselektor).

Klassennamen sollten nach ihrer Funktion (z.B. „Hinweis“) benannt werden und nicht nach den Formatierungen, die sie beinhalten. So stellen sie sicher, dass die Klasse auch nach einer Überarbeitung der Gestaltung noch nachvollziehbar den Bestandteilen eines Dokuments zugeordnet werden kann. Viele informelle Eigenschaften eines Elements können durch elementspezifische Attribute abgedeckt werden. CSS erlaubt das Ansprechen von Elementen anhand ihrer Attribute. Klassen und Klassenselektoren sollten Sie daher nur dann einsetzen, wenn keine andere Zuordnungsmöglichkeit besteht.

===== ID-Selektor ===== Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID mit dem id-Attribut zugeordnet wurde. Ein ID-Selektor wird gebildet, indem das Gatterzeichen „#“ vor den ID-Namen gestellt wird.




  
    
    CSS-Beispiel: ID-Selektor
    
  
  
    
      ID-Selektoren
      Dieses Beispiel demonstriert die Wirkung des ID-Selektors.

{{:inf:inf5ai_202324:07_webentwicklung:7_04:pasted:20240911-052938.png}} In diesem Beispiel erhält das gruppierende div-Element die ID „beispiel“. Die CSS-Regel bewirkt, dass um dieses Element ein grüner Rahmen dargestellt wird. ID-Selektoren können mit anderen Selektoren verbunden werden: * Mit dem Universalselektor: *#id – diese Schreibweise ist zu der Schreibweise ohne Universalselektor identisch. * Mit Elementselektoren: elementname#id * Mit Klassenselektoren: .klassenname#id bzw. #id.klassenname ==== Beachte:==== Eine ID darf in einem Dokument nur ein einziges Mal vorkommen, die Kombination des ID-Selektors mit anderen Selektoren ergibt nur dann Sinn, wenn Sie die entsprechende ID in mehreren Dokumenten und in unterschiedlichen Situationen einsetzen. Welches Attribut als ID erkannt wird, hängt bei XML-Dokumenten von der DTD ab. Da ein XML-Parser eine DTD nicht verarbeiten muss, kann bei dem Browser unbekannten XML-Formaten nicht garantiert werden, dass die CSS-Eigenschaften angewendet werden.