Listen-Kaskade / Vererbung [ font-size ]

ulle · #1 (**permalink**) 04.11.2004, 16:24

Hat evtl. jemand eine Lösung über Selektoren, nicht über Klassen oder IDs, der ersten UL-Ebene einen Font-Size von 0.8em und allen darunter liegenden einen Font-Size von 0.7em zu verpassen. Also 2 verschiedene Schriftgrößen, ohne weitere Vererbung und nur mit Selektoren.

Warum mein folgendes Beispiel nicht funktioniert ist mir bekannt !!!

Hier mal ein Ansatz:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/ 


html,body	{
			margin: 0;
			padding: 0;
			
			background-color: #FF9922;
			color: #000000;
			
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-size: 100.01%;
			}



#menu		{
			width: 80%;

			margin: 1em auto;			
			border:	1px solid #000000;
			padding: 2px;
			
			background-color: #FFFFFF; 
			}
	
	
#menu ul	{
			font-size: 0.7em;
			}
			
#menu > ul	/* Child */
			{
			background-color: #FF0000;	/*sichtbar-test*/
			font-size: 0.8em;
			}
			
			
#menu * ul	/* second Generation */
			{ 
			background-color: #FFFF00; 	/*sichtbar-test*/			
			font-size: 1em; 			/* weitere Vererbung verhindern */
			}

	
#menu li 	{
			padding: 0 0 0.1em 0;
			line-height: 145%;
			}
	

#menu li span,
#menu li a	
			{
			background-color: #FFFFFF;
			}
	
#menu li a:hover
			{
			background-color: #1155AA;
			color: #FFFFFF;
			}
	
#menu li span
			{
			background-color: #99CCFF;
			cursor: default;
			}
	
	

/*]]>*/
</style> 

</head> 
<body> 


<div id="menu">
	<ul>
		[*]Item one
		[*]Item two
		[*]Item three
			<ul>
				[*]Item one
				[*]Item two
				[*]Item three
					<ul>
						[*]Item one
						[*]Item two
						[*]Item three
							<ul>
								[*]Item one
								[*]Item two
								[*]Item three
								[*]<span title="Standort">Item four (activ)</span>
								[*]Item five  
							[/list]	
						
						[*]Item four
						[*]Item five  
					[/list]	
				
				[*]Item four
				[*]Item five  
			[/list]	
		
		[*]Item four
		[*]Item five  
	[/list]	
</div>


</body> 
</html>

andir · #2 (**permalink**) 04.11.2004, 17:53

Wenn Du es schon nicht rausfindest

Wie kann man die Kaskade austricksen?
Letztlich, so scheint mir, nur unter Bezugnahme auf nicht zwingend der Kaskade unterworfenen Elemente wie Klassen oder ID's.

Ich habe auch mal versucht, den umgekehrten Weg zu gehen:

Code:

#menu ul li ul li ul li    { 
         font-size: 0.7em; 
         } 

#menu ul li ul li ul { 
         font-size: 0.8em; 
         } 

#menu ul li ul li { 
         font-size: 0.7em; 
         } 
          
#menu ul li ul { 
         font-size: 0.8em; 
         } 
#menu ul li { 
         font-size: 0.7em; 
         } 
    
#menu ul { 
         font-size: 0.8em; 
         }

Bringt auch nix. Das hat mich anfangs schon gewundert, denn spätere Einträge sollten frühere überschreiben, andererseits sind die Auszeichnungen auch "umgekehrt" lesbar und spezifisch so dass die Kaskade wieder wirkt, weil die weniger spezifischen Elemente mit interpretiert werden müssen *grummel*.
Gut das ist ein Anfänger-Ansatz, aber ein Versuch wars wert

Ich sehe da gerade keine Lösung. (Was nichts zu bedeuten hat)

andir

toscho · #3 (**permalink**) 04.11.2004, 19:52

Du beziehst dich mit deiner Frage beide Male auf die Body-Schriftgröße, ja? Also mein Ansatz wäre ja ungefähr sowas:

Code:

ul {
    font-size: .8em;
}
ul li, ul ul * {
    font-size: 1em;
}
li ul {
    font-size: .9em;
}

Hab’s jetzt nicht ausprobiert, allerdings sollten da keine Probleme auftauchen…

Gruß
Thomas

andir · #4 (**permalink**) 04.11.2004, 20:53

Ja, so könnte es gehen wenn nicht:

Zitat:

A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, ">", and "+". Whitespace may appear between a combinator and the simple selectors around it.

The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.

Quelle: http://www.w3.org/TR/CSS21/selector.html

So wie ich das lese, kommt man damit um die Kaskade einfach nicht herum. Jedes Auftauchen eines - bereits mit einem einfachen Selektor beschriebenen Elements z.B. [ ul ] sorgt für dessen Präformatierung. Das Kombinieren ermöglicht in diesem Zusammenhang die Anwendung zusätzlicher Eigenschaften, dabei werden offensichtlich manche Eigenschaften nicht überschrieben, sondern aufgrund der Ausgangslage (Präformatierung) berechnet wie zumindest ihr beide wißt.

Wie soll dann eine Kombi von einfachen Selektoren und Kombinierten Selektoren das leisten können was ihr wollt?

Eine Ausschließlichkeitsregel bei kombinierten Selektoren scheint mir hierfür nicht vorgesehen, sondern das Gegenteil.

andir ( der sich gerne eines besseren belehren läßt.)

@toscho: dein Beispiel funktioniert nicht.

toscho · #5 (**permalink**) 04.11.2004, 21:29

Zitat:

Zitat von andir

@toscho: dein Beispiel funktioniert nicht.

Du glaubst doch nicht im Ernst, daß ich mir das gefallen lasse? ;)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
<title>Verschachtelte Schriftgrößen</title>
<style type="text/css">
body {
        font-size:      100px;
}
ul {
        font-size:      .8em;
}
ul li, li ul ul {
        font-size:      1em;
}
li ul {
        font-size:      .875em;
}
</style>


100px</p>
<ul>[*]80px
    <ul>[*]70px
        <ul>[*]70px
            <ul>[*]70px[/list]          [/list]      [/list]  [/list]

Gruß
Thomas

andir · #6 (**permalink**) 04.11.2004, 23:26

Das ist saugut Thomas

Ulle will aber, so wie ich das sehe, backgrounds zuordnen, wie soll das gehen?

Dein CSS-Code (geändert)

Code:

body {
        font-size:      100px;
}
ul {
        font-size:      .8em;
        background-color: #fff;
        color: red;
}
ul li, li ul ul {
        font-size:      1em;
        background-color: #1155AA;
         color: green;
}
li ul {
        font-size:      .875em;
        background-color: #ccc;
        color: white
}

Deine Kombi ul li, li ul ul, überschreibt alles mit blauem Hintergrund und grüner Schrift, kein Wunder bei der Verschachtelung.

Andererseits hast Du Ulles ausgesprochene Frage nach der Beeinflussung der Schriftgrößen perfekt gelöst

Gute Nacht

andir

toscho · #7 (**permalink**) 05.11.2004, 02:45

Zitat:

Zitat von andir

Ulle will aber, so wie ich das sehe, backgrounds zuordnen, wie soll das gehen?

Naja, da müßte man einfach für jede Ebene die Farbe extra angeben, der Übersicht halber separat. Also sowas:

Code:

ul,
ul ul ul,
ul ul ul ul ul {
        background:     #fff;
}
ul ul,
ul ul ul ul,
ul ul ul ul ul ul {
        background:     #eee;
}

Ich habe es mal zum Anklicken als Demo auf meiner Webseite abgelegt: Verschachtelte Schriftgrößen.

Gruß
Thomas

ulle · #8 (**permalink**) 05.11.2004, 09:26

Bin beeindruckt.......... Danke erstmal, werde die Veranstaltung jetzt mal prüfen/probieren.

Zitat:

Ulle will aber, so wie ich das sehe, backgrounds zuordnen, wie soll das gehen?

Nein nicht wirklich, habe die Hintergrundfarbe erstmal eingefügt damit sichtbar ist welchen UL-Tag mit welcher definition angesprochen wird, mache ich übrigens immer beim "testen"/auszeichnen, weil programmieren kann dieses wohl keiner nennen.

Falls diese Auszeichnung

"background-color: #FF0000; /*sichtbar-test*/" zur Verwirrung beigetragen hat möchte ich mich dafür entschuldigen........

andir · #9 (**permalink**) 05.11.2004, 09:49

Das ist großartig Thomas

kann mich Ulle nur anschließen.

andi(r)

ulle · #10 (**permalink**) 05.11.2004, 14:45

Code:

ul 			{ 
        	font-size:      .8em; 
			}

setzt mir 80% vom Ursprung

Code:

ul li,
li ul ul 	{ 
        	font-size:      1em; 
			}

verhindert weitere Vererbung in jedem li-Tag

Code:

li ul 		{ 
        	font-size:      .875em; /* = 70% von BODY oder 0.8% * 0.875% */
			}

erzeugt die 70% vom Ursprung

nur eines verstehe/sehe ich noch nicht - die genaue Funktionsweise von diesem Selektor

Code:

li ul ul

<edit>
Oh man bin ich blind, logisch

durch [li ul ul] wird bei allen weiteren das Erben verhindert nur nicht beim ersten [li ul]

Super Toscho, hervorragender Denksport

Ich meine dieses Highlight sollte in die Knowledge Base, immerhin das beste Beispiel zur Vermeidung von Inline-Auszeichnung (class/id) was ich bisher gesehen habe.
</edit>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Intranet Formatierung CSS	Mitschy71	CSS	6	19.02.2015 09:54
Dynamische Größen	Killhunter	CSS	0	14.05.2011 16:56
Vererbung bei Listen (Hintergrund)	img	CSS	10	15.04.2009 16:23
background in firefox 3	etech	CSS	13	12.09.2008 11:10
Vererbung bei Listen	ONeill	CSS	5	16.02.2006 09:51