Elemente ohne einer ID oder einer Class ansprechen?

[Jnnbo]

Moin,

mein HTML sieht so aus:

<section class="imprint">
  <h2>Impressum</h2>
  <p></p>
  <p></p>
  <article>
    <h2></h2>
    <p></p>
    <p></p>
  </article>
</section>

ist es hier möglich zuverlässig, vor allem auch in älteren Browsern die einzelnen Elemente anzusprechen ohne spezielle "id" bzw. "class" zu vergeben?

H2 in diesem Beispiel könnte ich ja so ansprechen?

.imprint h2 {
	font-size:2em;
}

.imprint article h2 {
	font-size:1.5em;
}

Aber wie spreche ich die unterschiedlichen <p> an? Vor allem wenn ich möchte, dass der zweite Abschnitt innerhalb von <article> mehr Abstand nach oben bekommen soll?

Ist mein Vorhaben überhaupt Sinnvoll oder lieber für jeden "scheiß" eine eigene Class bzw. id vergeben?

[Schuer]

Aber wie spreche ich die unterschiedlichen <p> an? Vor allem wenn ich möchte, dass der zweite Abschnitt innerhalb von <article> mehr Abstand nach oben bekommen soll?

Etwa über .imprint p + p oder .imprint p:nth-child(2).

Ist mein Vorhaben überhaupt Sinnvoll oder lieber für jeden "scheiß" eine eigene Class bzw. id vergeben?

Wenn du die Wahl hast, spezifisch zu sein, indem du Elementen Klassen vergibst, solltest du sie nutzen. Denn spezifisch zu sein bedeutet, robust zu sein.

IDs würde ich vollständig meiden. Sie sind zu spezifisch. — Wie jetzt?! Gerade hieß es doch, je spezifischer… — Sie sind zu spezifisch im Sinne von CSS-Spezifität! Sie sind zu wertig und konzeptionell nicht modular. (Etwas ausführlicher hier: http://webkrauts.de/comment/4749#comment-4749)

Fazit: So spezifisch wie möglich sein, was die Auszeichnung von Elementen angeht. So unspezifisch wie möglich bleiben, was CSS-Spezifität angeht.

Hoffe, das war jetzt nicht verwirrend.

[Gunnar Bittersmann]

@@Schuer:

IDs würde ich vollständig meiden.

Du gehörst auch dieser Sekte an‽

LLAP

[Schuer]

Du gehörst auch dieser Sekte an‽

Ich hatte dir und deinem Union-Fan doch erklärt, warum ich es für sinnvoll halte, vollständig auf IDs zu verzichten. Sie passen nicht in modulare Konzepte.

[Jnnbo]

Wenn du die Wahl hast, spezifisch zu sein, indem du Elementen Klassen vergibst, solltest du sie nutzen. Denn spezifisch zu sein bedeutet, robust zu sein.

Ok, ich verstehe. Aber wenn ich innerhalb von <article> zwei oder drei <p> habe dem zweiten ein Abstand z.B. nach unten geben möchte wie sollte dann die Klasse heißen? Deshalb dachte ich auf Klassen komplett zu verzichten und versuchen diese <p> anderes anzusprechen.

[Schuer]

Ok, ich verstehe. Aber wenn ich innerhalb von <article> zwei oder drei <p> habe dem zweiten ein Abstand z.B. nach unten geben möchte wie sollte dann die Klasse heißen?

.imprint article p { } für alle p

.imprint article p + p { } für jedes p, das einem anderen folgt. Also alle, außer dem ersten.

.imprint article p:nth-child(2) { } für genau das zweite p

.imprint article p:nth-child(1n+2) { } für das zweite p und alle nachfolgenden

Deshalb dachte ich auf Klassen komplett zu verzichten und versuchen diese <p> anderes anzusprechen.

Kein Problem, kannst du machen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Schuer!

.imprint article p:nth-child(2) { } für genau das zweite p

Das stimmt so nicht, denn es ist noch eine Überschrift enthalten. Also nth-of-type verwenden.

Matthias

[Mattes]

.imprint article p:nth-child(2) { } für genau das zweite p

Das stimmt so nicht, denn es ist noch eine Überschrift enthalten. Also nth-of-type verwenden.

… was leider alles völlig an der Frage vorbeigeht, denn es war ausdrücklich von "vor allem auch in älteren Browsern" die Rede.

nth-irgendwas fällt eigentlich ganz raus, das kann der IE erst seit Version 9, und selbst das + könnte ein Problem werden, wenn es denn unbedingt noch der IE 6 sein muss (wobei man sich da dann wirklich ernsthaft überlegen sollte, ob der überhaupt mit CSS belästigen werden sollte – eine ordentliche HTML-Seite lässt sich schließlich auch ohne Kosmetik lesen).

Es müsste also erstmal geklärt werden, was für "ältere Browser" es denn sein sollen, und in jedem Falle kommt man wohl um etwas wie das IE7-Skript nicht herum.

[Gunnar Bittersmann]

@@Mattes:

nth-irgendwas fällt eigentlich ganz raus, das kann der IE erst seit Version 9, und selbst das + könnte ein Problem werden, wenn es denn unbedingt noch der IE 6 sein muss

Muss es nicht.

(wobei man sich da dann wirklich ernsthaft überlegen sollte, ob der überhaupt mit CSS belästigen werden sollte

Dieselbe Überlegung sollte man für IE 8 anstellen und das Ergebnis sollte genauso ausfallen. Damit fällt nth-irgendwas nicht raus.

eine ordentliche HTML-Seite lässt sich schließlich auch ohne Kosmetik lesen).

Eben.

Es müsste also erstmal geklärt werden, was für "ältere Browser" es denn sein sollen, und in jedem Falle kommt man wohl um etwas wie das IE7-Skript nicht herum.

Doch, kommt man. Progressive enhancement.

LLAP

[Schuer]

Das stimmt so nicht, denn es ist noch eine Überschrift enthalten. Also nth-of-type verwenden.

Sic! Danke für die Korrektur. Sie zeigt, wie wackelig und anfällig ein solches kontextsensitives Styling ist gegenüber einer spezifischen Auszeichnung von Elementen mit Klassen.

[Gunnar Bittersmann]

@@Schuer:

Das stimmt so nicht, denn es ist noch eine Überschrift enthalten. Also nth-of-type verwenden.

Sic! Danke für die Korrektur. Sie zeigt, wie wackelig und anfällig ein solches kontextsensitives Styling ist gegenüber einer spezifischen Auszeichnung von Elementen mit Klassen.

Sowas in der Art ist mir untergekommen:

<div class="foo">
  <div id="bar">…</div>
  <script>[code lang=javascript]$('#bar').on('click', function () { window.location.href = 'http://example.net/bar'; });

</script>   <div>…</div> </div>[/code]

Hab dann mal die JavaScript-Verlinkung durch einen richtigen Link ersetzt:

<div class="foo">
  <a href="http://example.net/bar"><div id="bar">…</div></a>
  <div>…</div>
</div>

Und schon war das zweite div nicht mehr so gestylt wie vorher, weil es per .foo div:nth-child(3) selektiert war. WTF?? Wer macht denn sowas?

:nth-child ist sinnvoll beim Abzählen gleichartiger Elemente. Niemals unterschiedliche Elemente anhand ihrer gegenwärtigen Platznummern im DOM selektieren!

Das heißt aber nicht, dass kontextsensitives Styling generell schlecht wäre. Im Gegenteil, man muss es nur sinnvoll einsetzen.

LLAP

PS: Der Hack ist temporär

<div class="foo">
  <a href="http://example.net/bar"><div id="bar">…</div></a>
  <script></script>
  <div>…</div>
</div>

WTF. :-(

[Gunnar Bittersmann]

@@Schuer:

IDs würde ich vollständig meiden. Sie sind zu spezifisch. — Wie jetzt?! Gerade hieß es doch, je spezifischer… — Sie sind zu spezifisch im Sinne von CSS-Spezifität! Sie sind zu wertig und konzeptionell nicht modular.

Manche verstehen damit umzugehen. Andere folgen dem OOCSS/BEM/WTF-Guru.

Wenn man ein spezifisches Element stylen will, dann will man ein spezifisches Element stylen. Dann ist es gut so, dass der ID-Selektor spezifischer ist als der Klassenselektor.

Wenn man eine spezifische Gruppe von Elementen stylen will, dann will man eine spezifische Gruppe von Elementen stylen. Dann ist es gut so, dass der Klassenselektor spezifischer ist als der Elementtypselektor.

Spezifität ist nicht dein Feind, sondern dein Verbündeter.

LLAP

[Schuer]

Manche verstehen damit umzugehen. Andere folgen dem OOCSS/BEM/WTF-Guru.

Die, die denken zu verstehen, damit umgehen zu können, sind leider noch nie an Grenzen gekommen. Oder ihnen fehlt die Empathie oder Erfahrung, zu erkennen, das andere Teammitglieder ihrem Weg nicht folgen können und damit das Projekt beeinträchtigt wird.

Wenn man ein spezifisches Element stylen will, dann will man ein spezifisches Element stylen.

Dieses spezifische Element ist für genau diesen einen Moment, in dem du darüber redest, ein spezifisches Element. Bereits einen Augenblick später könnten es bereits mehrere dieser einzigartigen Elemente geben, weil das Projekt es erforderlich macht.

Dann ist es gut so, dass der ID-Selektor spezifischer ist als der Klassenselektor.

Nein, er ist deutlich zu wertig und lässt sich quasi nur über einen weiteren ID-Selektor aufheben. Er untergräbt das Konzept von Modularität.

Wenn man eine spezifische Gruppe von Elementen stylen will

Modularität.

Spezifität ist nicht dein Feind, sondern dein Verbündeter.

Sehe ich anders. Sämtliche aktuell relevanten Konzepte im Web laufen darauf hinaus, modular zu arbeiten und Komponenten zu kapseln.

[Gunnar Bittersmann]

@@Jnnbo:

<section class="imprint">

imprint?? Das soll nicht „Impressum“ heißen, oder? Heißt es nämlich nicht.

PLEASE STOP USING THE WORD IMPRINT FOR “IMPRESSUM”

Wie übersetzt man Impressum? Part 1

Wie übersetzt man Impressum? Part 2. Take 2.

Aber wie spreche ich die unterschiedlichen <p> an? Vor allem wenn ich möchte, dass der zweite Abschnitt innerhalb von <article> mehr Abstand nach oben bekommen soll?

Das hängt davon ab, ob du den zweiten meinst oder alle außer dem ersten. Was also soll passieren wenn du mehr als zwei p innerhalb von article hast?

Ist mein Vorhaben überhaupt Sinnvoll oder lieber für jeden "scheiß" eine eigene Class bzw. id vergeben?

Nein, keine Klasse für jeden Scheiß. Schon gar keine Scheiß präsentationsbezogenen Klassen.

LLAP

[Jnnbo]

Hallo und guten Morgen,

Das hängt davon ab, ob du den zweiten meinst oder alle außer dem ersten. Was also soll passieren wenn du mehr als zwei p innerhalb von article hast?

deshalb habe ich ja gefragt, ob ich ganz gezielt einzelne <p> innerhalb von <article> bzw. <section> habe. Wie viele <p> ich letztendlich habe, kann ich zu diesem Zeitpunkt noch nicht sagen.

Nein, keine Klasse für jeden Scheiß. Schon gar keine Scheiß präsentationsbezogenen Klassen.

Also nennen ich eine Klasse am besten "5tz7uj8" wie andere Systeme dieses auch machen? Dann kann ich diese Klasse die z.B. für einen Abstand sorgt an unterschiedlichen Stellen einsetzten? Eine Klasse "Abstand" zu nennen wäre ja bestimmt wieder zu sehr präsentationsbezogenen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

Nein, keine Klasse für jeden Scheiß. Schon gar keine Scheiß präsentationsbezogenen Klassen.

Also nennen ich eine Klasse am besten "5tz7uj8" wie andere Systeme dieses auch machen? Dann kann ich diese Klasse die z.B. für einen Abstand sorgt an unterschiedlichen Stellen einsetzten? Eine Klasse "Abstand" zu nennen wäre ja bestimmt wieder zu sehr präsentationsbezogenen?

Wenn es einen inhaltlichen Grund gibt, den 2. Absatz anders zu gestalten, dann verwende einen aussagekräftigen Klassenbezeichner. Gibt es den nicht, sprich das Element mit den schon genannten Pseudoklassen an.

Matthias

[Gunnar Bittersmann]

@@Jnnbo:

Das hängt davon ab, ob du den zweiten meinst oder alle außer dem ersten. Was also soll passieren wenn du mehr als zwei p innerhalb von article hast?

deshalb habe ich ja gefragt, ob ich ganz gezielt einzelne <p> innerhalb von <article> bzw. <section> habe. Wie viele <p> ich letztendlich habe, kann ich zu diesem Zeitpunkt noch nicht sagen.

Es ist auch nicht entscheidend, wieviele p du hast, sondern welche du gesondert kennzeichnen willst.

Im Speziellen also größerer Abstand zwischen erstem und zweiten Absatz (wenn ja, warum?) oder größerer Abstand zwischen allen Absätzen, außer zwischen Überschrift und erstem Absatz?

Also nennen ich eine Klasse am besten "5tz7uj8" wie andere Systeme dieses auch machen?

Du weißt selbst, dass das Unsinn wäre.

Dann kann ich diese Klasse die z.B. für einen Abstand sorgt an unterschiedlichen Stellen einsetzten? Eine Klasse "Abstand" zu nennen wäre ja bestimmt wieder zu sehr präsentationsbezogenen?

„Abstand“ sollte im HTML nicht vorkommen. Sondern Begriffe, die die Unterschiedlichkeit der Absätze verdeutlichen.

Ist bei dir der erste Absatz der Aufreißer (lede, lead) und du willst eigentlich nicht vor derm zweiten, sondern nach dem ersten Absatz einen größeren Abstand?

Dann ist <p class="lede"> für den ersten Absatz völlig in Ordnung.

LLAP