IDs, Klassen und Elemente ansprechen

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich bin (noch) CSS-Beginner und ich habe eine Frage zum Ansprechen von IDs, Klassen, Elementen usw. anhand eines Beispiels…

Ich habe 2Divs („#div1“ und „#div2“), die jeweils eine Überschrift „h1“, ein p-Element und eine Liste (ul/li) enthalten.

Wie spreche ich diese Elemente korrekt an?

Alle Elemente, die eindeutig einer ID oder einer Klasse zugeordnet sind (in diesem Beispiel nur die DIVs), kann ich ja direkt darüber ansprechen. Wenn ich aber „h1“ anspreche, werden ja ALLE „h1“ gleich angesprochen. Was ist, wenn die Farbe von „h1“ im „#div1“ und im „#div2“ unterschiedliche Farben haben sollen?

Wenn ich das richtig verstanden habe, muss ich keine Klassen vergeben - das funktioniert auch über eine Art „Pfad“?

so in etwa:

#div1 h1 {position…}
#div1 p {position…}
#div1 ul li {…}

#div2 h1 {position…}
#div2 p {position…}
#div2 ul li {…}

Ich bin grade dabei Bücher (z.Bsp. Rheinwerk / Peter Müller) durchzuarbeiten und lt. diversen Tutorials zu testen. Da ich irgendwie ein bisschen den Faden verloren hab, und das was ich getestet habe, so nicht funktioniert, gehen an euch die Fragen - ist das so? Wie macht ihr das? Was ist die praktikabelste Lösung? (und warum?) und habt ihr zusätzliche Tipps (gern auch Links zu Tutorials oder Seiten, auf denen es erklärt wird…

Vielen Dank vorab!

2

Ich habe nun doch noch einen Link gefunden, der den Sachverhalt ganz gut erklärt:

http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board9-css-css3/4517-ich-verstehe-nicht-wie-man-verschachtelte-elemente-anspricht-via-css/

3

Hallo

das funktioniert auch über eine Art „Pfad“

Ja. Ich vergebe gerne zeitweise knallige Hintergrundfarben um zu kontrollieren ob die von mir gewünschten Elemente, und auch nur genau die, angesprochen werden.

Wobei mir deine Bezeichnungen wie „#div1“ oder „position“ Sorge bereiten dass du zum Lernen an veraltete Unterlagen geraten bist.

id (#) sollten nur verwendet werden, wenn die Bezeichnung aus technischen Gründen nur einmal vergeben werden darf. Ansonsten sind Klassen class (.) zu bevorzugen.

div-Elemente dürfen nach den HTML-Regeln nur vergeben werden, wenn es keine geeigneteren Elemente wie main, article, section, nav, figure u.s.w. gibt.

Das CSS-Attribut position war nie für grundsätzliches Layout gedacht. In Zeiten von responsive Design mit den neuen Möglichkeiten wie Flexbox ist position nur noch in absoluten Ausnahmefällen erforderlich.

Da ich irgendwie ein bisschen den Faden verloren hab, und das was ich getestet habe, so nicht funktioniert

Aus den Informationen ist dein Problem leider nicht ersichtlich. Ein konkretes Beispiel, am Besten ein Link zu der Problemseite, sind deutlich sinnvoller.

Grundsätzlich sollen bei Webseiten Inhalt und Aussehen so weit sinnvoll möglich getrennt werden. Dazu gehört im HTML-Quelltext Elemente weglassen, die nur dem Aussehen dienen und auch id und class sparsam einzusetzen.

Dadurch resultieren dann die Pfade um bestimmte HTML-Elemente mit dem CSS zu erwischen.

Um das bisher Beschriebene umsetzen zu können wurden die Möglichkeiten der Pfade mit HTML5 und CSS3 erheblich erweitert. Stichwort: Selektoren.

Das unscheinbare Leereichen in

#div1 h1

ist zum Beispiel so ein Selektor, ein sogenannter Familienselektor.

Damit werden alle h1-Elemente innerhalb von #div1 ausgewählt, egal wie tief der Inhalt von #div1 insgesamt verschachtelt ist.

Gruss

MrMurphy

4

@MrMurphy - danke für die Infos und die Erklärung/Zusammenfassung!

Die genannten Problematiken sind bekannt (id/class, header/footer/main/…), nur mit Flexbox hab ich mich noch nicht befasst, es steht aber schon auf meiner ToDo-Liste… :slight_smile: und dein Satz:

…gibt ganz genau wieder, um was es mir ging.

Vielen Dank!!!