Selektorsyntax um mehrere Überschriften in einem Div zu stylen ? :confused:

[Ironmouse]

Hallo zusammen.

Weiss einer der Gurus hier Rat?

Ich möchte meinen Code soweit wie möglich zusammenfassen um Redundanzen zu umgehen.

Ich habe zwei Div für left und right Content. Ich möchte für jede Überschrift in diesen Divs Styles definieren:

z.B

#leftContent h1, #rightContent h1{
	font-size: 17px;
	font-weight: normal;
	font-style: normal;
	color: #aaaaaa;
	text-decoration: none;
	line-height: normal;
	margin: -2px 0 6px 0;
	padding: 0;
	letter-spacing: 5px;
}

#leftContent h2, #rightContent h2{
	font-size: 15px;
	font-weight: normal;
	font-style: normal;
	color: #eeeeee;
	text-decoration: none;
	line-height: normal;
	margin: 0 0 6px 0;
	padding: 0;
	letter-spacing: 5px;
}
etc...

Wie man sieht, sind gewisse Definitionen völlig identisch. Daher möchte ich diese zusammenfassen.
Aber der Selektor würde unglaublich lange werden...

Gibt es einen kurzen und eleganten Selektor um dieses Styles ab zu decken? Vielleicht in so einer Art?:

#leftContent h1 h2 h3 h4 h5 h6, #rightContent h1 h2 h3 h4 h5 h6{
  ...
}

Besten Dank für die Antwort.

 

[aGeNET]

Hallo, dein Vorhaben geht lediglich über diese Variante, auch wenn es länger ist.

#leftContent h1, #rightContent h1 { ... }

Sonst so:

h1, h2, h3, h4, h5, h6 { ... }

aber sie sehen dann auf der ganzen Seite gleich aus

 

[Maik]

Hi,

wenn das HTML-Dokument weitere h1-6-Elemente enthält, für die die Regeln nicht gelten sollen, kannst du zumindest die Deklarationen mit gleichem Eigenschaftswert in einer Liste gruppieren:

#leftContent h1, #rightContent h1, #leftContent h2, #rightContent h3, #leftContent h4, #rightContent h4, #leftContent h5, #rightContent h5, #leftContent h6, #rightContent h6 {
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        line-height: normal;
        padding: 0;
        letter-spacing: 5px;
}

Alle unterschiedlichen Formatierungen (font-size,color,margin) müssen dann im entsprechenden Nachfahrenselektor geregelt werden.

 

[Ironmouse]

Danke für eure Inputs

Vorerst seh ich auch keine einfache Lösung diese Überschriften-Styles zusammen zu fassen.
Ich werde einfach diesen langen Selekor nehmen der alle gleichen Eigenschaften abdeckt...

Vielleicht tut sich hier noch was mit CSS3? Das wäre schön.