''-Element, statt dem grünen Rahmen, ein roter Rahmen gezogen werden. Hier wird kein Universalselektor angewendet:


/* Grüner, gepunkteter Rahmen für alle Elemente */
* { 
  margin: 5px;
  padding: 3px;
  border: 2px dotted green;
  text-align: center; 
}

/* Nur ein Rahmen, kein Universal- sondern normaler Typselektor */
main { 
	border: 3px solid red; 
}

Mit Hilfe des Universalselektors soll nun zusätzlich um jedes **Kindselement** von ''

'' **ein blauer Rahmen** gezogen werden:


/* Grüner, gepunkteter Rahmen für alle Elemente */
* { 
  margin: 5px;
  padding: 3px;
  border: 3px dotted green;
  text-align: center; 
}


/* Nur ein Rahmen, kein Universal- sondern normaler Typselektor */
main { 
	border: 3px solid red; 
}

/* Rahmen um alle Kindselemente im main-Element */
main * { 
	border: 2px solid blue; 
}

=== Demo ===



  Kopfzeile
  Navigation
  
    Universalselektor
    Ein einfacher Absatztext.
    Ein zweiter Absatztext
  
  Fußzeile

[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/01/index.html|Live Demo]] ===== Attributselektor ===== Seit CSS Level 2 gibt es Selektoren, die HTML-Elemente anhand ihrer Attribute ansprechen können. In diesem Fall muss der Attributname zwischen eckigen Klammern [] gesetzt werden. {{:modul:m293:learningunits:lu12:attribut_selektor_1.png?600|}} Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, das ein ''title''-Attribut besitzt, einen Rahmen zeichnen.


/* Styling für alle Elemente mit dem Attribut title */
[title] {
  border: 4px solid black;
}

Dieser Attributselektor kann auch nur auf bestimmte HTML-Elemente angewendet werden. Im Beispiel unten selektiert der Attributselektor alle title-Attribute des ''''-Elements.



/* Styling for alle a-Element mit dem Attribut title */
a[title] { 
  text-decoration: none;
  color: red;
  font-weight: bold;
  border: 2px dotted red;
}

=== Demo ===




    Attributselektor

Fach M293 ...
    Fach ICT-02
    
    Dieser Absatz hat auch ein title-Attribut.

[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/04/index.html|Live Preview]] ==== Attributselektor mit einem bestimmten Attributwert ==== Mit dem Attributselektor können Attribute mit einem bestimmten Wert selektiert werden. Es gibt drei Möglichkeiten einen bestimmten Attributwert auszuwählen: ^Selektor ^Bezeichnung ^Auswahl ^Beispiel^ |''[attr=wert]'' |Attributselektor (Attributwert) |jedes Element, bei dem das Attribut ''attr'' den Wert ''wert'' enthält |''''| |''[attr~=wert]'' |Attributselektor (Attributwert) mit Tilde (''~'') |jedes Element, bei dem im Attribut ''attr'' der Wert ''wert'' als allein stehendes Wort vorkommt |''''| |''[attr%%|%%=wert]'' |Attributselektor (Attributwert) mit Verkettungszeichen (''%%|%%'') |jedes Element, bei dem im Attribut ''attr'' der Wert ''valx'' am Anfang als eine durch Bindestrich getrennte Zeichenfolge steht |''''| === Beispiele === Styling für alle HTML-Elemente, die im title den Attributwert "deprecated" besitzen.


/* Styling für alle HTML-Elemente wo title
   den Attributwert deprecated besitzt
 */
[title=deprecated] {
  color: red;
  text-decoration: line-through;
}

Styling für alle HTML-Elemente, die im title als Attributwert das Wort "bzzlab" enthalten.


/* Styling von HTML-Elemente wo title im
   Attributwert das Wort "bzzlab" enthält
 */
[title~=bzzlab] { 
	font-weight: bold; 
	color: red; 
}

Styling für alle ''''-Elemente mit dem Attribut title ''title''.¨


/* Styling von HTML-Elemente wo title im
   Attributwert das Wort "bzzlab" enthält
 */
[title~=bzzlab] { 
	font-weight: bold; 
	color: red; 
}

=== Demo ===



    [title=deprecated]
    Das HTML-Element center wurde in HTML5 als veraltet erklärt und sollte durch eine CSS-Lösung wie beispielsweise 'text-align: center' realisiert werden.   
    [title~=bzzlab]


      Einstieg in bzzlab
      Fach ICT-02
    
    [hreflang|=de]
    
      Deutsche Version
      Englische Version

[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/05/index.html|Live Preview]] ==== Attributselektor mit einem bestimmten Teilwert (Teilübereinstimmung) ==== In CSS3 wurden Attributselektoren erweitert, um auch Teilwerte auszuwählen. Im Folgenden werden die drei Attributselektoren tabellarisch dargestellt: ^Selektor ^Bezeichnung ^Auswahl ^Beispiel^ |''[attr^=wert]'' |Attributselektor (Teilwert) |jedes Element, bei dem das Attribut ''attr'' mit der Textfolge ''wert'' anfängt |''''| |''[attr$=wert]'' |Attributselektor (Teilwert) |jedes Element, bei dem das Attribut ''attr'' mit der Textfolge ''wert'' endet |''''| |''[attr*=wert]'' |Attributselektor (Teilwert) |jedes Element, bei dem das Attribut ''attr'' die Textfolge ''wert'' enthält |''''| Styling für alle ''''-Elemente, bei denen das Attribut ''href'' mit ''http:%%//%%'' beginnt.


/* Styling alle a-Elemente wo das Attribut href mit http:// beginnt */
a[href^="http://"] {
 text-decoration: none;
 border-bottom: 2px dotted red;
 color: red;
}

Styling für alle ''''-Elemente, bei denen das Attribut ''href'' mit ''.pdf'' endet


/* Styling für a-Elemente wo das Attribut href mit .pdf endet */
a[href$=".pdf"] {
  text-decoration: none;
  color: red;
  padding: 1px;
  border: 2px dotted red;
}

Styling für ''''-Elemente, bei denen das Attribut ''href'' die Textfolge ''mydomain'' enthält.


/* 
Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist 
*/
a[href*=mydomain] { 
	font-weight: bold; 
	color: red; 
}

=== Demo ===



    Attributselektor (Teilwerte)

Weitere Informationen zu diesem Thema finden Sie auf dieser Website wieder.
    Zusätzlich habe ich Ihnen ein PDF-Dokument mit interessantem Inhalt zusammengestellt.
    Und natürlich noch ein paar sehr interessante Links:
    
      Reportage No. 1
      Kurzer Report (https)
      Upload (ftp)
      News-Server (nntp)

[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/06/index.html|Live Preview]] ---- {{tag>m293-LU12 m293-G2G m293-G2F}} Nach [[http://ict.bzzlab.ch|Daniel Garavaldi]]