Verschiedene <div> mit Style in seperaten Datei

[möchtegern]

Hy,
ich muss in einer HTML ein Div in einem Div einbauen wobei die Styles der beiden Divs in einer seperaten CSS Datei ausgelesen werden sollen.

Ich weiß bloss leider nicht, wie ich in der CSS Datei festlegen kann, welcher Style zu welchem DIV gehört. Muss ich dennen irgendwie Namen verpassen oder so ?

gruß de möchtegern

[Christian Kruse]

Moin möchtegern,

ich muss in einer HTML ein Div in einem Div einbauen wobei die Styles der beiden Divs in einer seperaten CSS Datei ausgelesen werden sollen.

Ich weiß bloss leider nicht, wie ich in der CSS Datei festlegen kann, welcher Style zu welchem DIV gehört. Muss ich dennen irgendwie Namen verpassen oder so ?

Da gibt es mehrere Möglichkeiten. Du kannst…

• Klassen verwenden
• IDs verwenden
• Selektoren verwenden, bei denen du die Kaskade überschreibst (z. B. „div“ und „div div“)

Sicherlich gibt es noch weitere Möglichkeiten. Wo genau liegt dein Problem?

LG,
 CK

[Roland]

Ich weiß bloss leider nicht, wie ich in der CSS Datei festlegen kann, welcher Style zu welchem DIV gehört. Muss ich dennen irgendwie Namen verpassen oder so ?

Weil ich ein Optimierungsfreak bin und alles sehr gerne schlank halte für SEO, empfehle ich ...

Quelltextsparendes Beispiel 1, wenn div direkt im div folgt:

<div>  
 <div>  
  Inhalt  
 </div>  
</div>

div {  
 height: 40px;  
}  
div > div {  
 height: 20px;  
}

Beachten: Erster Teil vererbt immer alles weiter weil du einen Wert für alle Div-Elemente festlegst, heißt was du unter div { } für Werte gesetzt hast, hat dann auch div > div { }. Was du in div > div { } hast wird nicht auf das erste div übertragen, weil es speziell ist und nur für Divs gilt, die direkt in einem Div folgen und auch Div sind.

Quelltextsparendes Beispiel 2, wenn div nicht direkt im div folgt, sondern andere Elemente dazwischen sind:

<div>  
 <h1> Überschrift </h1>  
 <p>Inhalt</p>  
 <div>  
  Anderer Inhalt mit eventuell anderer Hintergrundfarbe  
 </div>  
</div>

div {  
 height: 100px;  
 background-color: #F0F;  
}  
/* Ist auch 100px hoch */  
div * div {  
 background-color: #00F;  
}

Gz,
Roland

[Matthias Apsel]

Om nah hoo pez nyeetz, Roland!

Quelltextsparendes Beispiel 2, wenn div nicht direkt im div folgt, sondern andere Elemente dazwischen sind:

<div>

<h1> Überschrift </h1>
<p>Inhalt</p>
<div>
  Anderer Inhalt mit eventuell anderer Hintergrundfarbe
</div>
</div>

>   
  

> div \* div {  
>  background-color: #00F;  
> }[/code]  
  
der Selektor `div * div`{:.language-css} kann in deinem Beispiel nichts selektieren.  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Gunnar Bittersmann]

@@Roland:

nuqneH

Weil ich ein Optimierungsfreak bin

Bist du? Warum gibst du dann eine suboptimale Lösung an?

Es ist kaum zu erwarten, dass dies die beiden einzigen 'div'-Elemente auf der Seite sind, geschweige denn auf der Website.

'div' ist ein so allgemeines Element, dass 'div' – wenn überhaupt – in CSS-Selektoren nur in Verbindung mit IDs oder Klassen verwendet werden sollte.

Entsprechendes gilt für 'span'.

Qapla'