CSS beschränken ... ist das möglich?

[Prinz Steffen von Lübben]

Ich habe, nunmehr, durch vorherige Dialoge meine Seite(n) in php einzeln gestaltet.

Teile sind mit <div id="Kopf"><?php include '../inh/Kopf.php';?></div> und <div id="Fuß"><?php include '../inh/Fuß.php';?></div> verbunden.

Die DIV-Container beziehen sich auf ein Stylesheet, das standardmäßig im Kopfbereich mit <link rel="stylesheet" href='../css/style.css' type="text/css"> eingebunden wird, und so die Größenbeschänkung im Layout erlaubt.

Nun haben einzelne Seiten im <div id="Bauch">Bauch-Bereich</div> Tabellen und <link rel="stylesheet" href='../css/table.css' type="text/css"> zusätzlich im Kopf.

Das Problem besteht nun darin, daß die Auswirkungen von der table.css sich bei den entsprechenden Seiten nicht nur auf den Bauch-Bereich beschränkt. Und der Übergriff auf Kopf und Fuß ist eigentlich nicht gewünscht!

Bliebe also die Frage: Wie lässt sich das vorhandene CSS beschränken?

[Rolf B]

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren

[Prinz Steffen von Lübben]

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren

kann ja mal nachschauen @Rolf B, jedoch ist diese Art zu antworten nicht höflich, wurde selbst mir gegenüber schon mehrfach angemahnt & auch nicht immer verständlich!

[Rolf B]

Ich habe nicht die Absicht, Dir gegenüber höflich zu sein.

[Prinz Steffen von Lübben]

Ich habe nicht die Absicht, Dir gegenüber höflich zu sein.

Und deshalb @Rolf B war auch Deine Antwort am Tenor der Frage vorbei?

[Rolf B]

Ich weiß nicht, wer für 16:29 ein + verteilt hat - ich bitte, das rückgängig zu machen. Das Bewertungssystem ist nicht für persönliche Bewertungen gemacht.

Der Link zielt genau auf deine Fragestellung. Wie selektiere ich mit CSS das, was ich selektieren will, und nicht das, was ich nicht will. Wenn dein table.css auf Kopf und Fuß zutrifft, ist es zu unspezfisch.

[Gunnar Bittersmann]

@@Rolf B

Das Bewertungssystem ist nicht für persönliche Bewertungen gemacht.

Wie letztens besprochen: Wunschdenken. 😶

🖖 Живіть довго і процвітайте

[Raketenwilli]

@@RolfB:

Hm. Der Deliquent bewirbt in seinem Benutzerprofil, also in diesem Forum, seine Haltung als Reichsbürger. Mir geht nicht ein, warum man DAS in diesem Forum nicht „beleuchtet sehen“ will, wo doch offensichtlich ist, dass DAS auch ein höchst negatives Licht auf das Forum wirft.

[Gunnar Bittersmann]

@@Raketenwilli

Hm. Der Deliquent bewirbt in seinem Benutzerprofil, also in diesem Forum, seine Haltung als Reichsbürger. Mir geht nicht ein, warum man DAS in diesem Forum nicht „beleuchtet sehen“ will

Mir auch nicht. Aber ich denke, das klären wir hinter den Kulissen.

🖖 Живіть довго і процвітайте

[Raketenwilli]

Aber ich denke, das klären wir hinter den Kulissen.

Gut so.

[Prinz Steffen von Lübben]

@@RolfB:

Hm. Der Deliquent bewirbt in seinem Benutzerprofil, also in diesem Forum, seine Haltung als Reichsbürger. Mir geht nicht ein, warum man DAS in diesem Forum nicht „beleuchtet sehen“ will, wo doch offensichtlich ist, dass DAS auch ein höchst negatives Licht auf das Forum wirft.

@Raketenwilli Die schlechte Beleuchtung trifft wohl auf Dein Gedankenstübchen z, da meine Wenigkeit dieses Thema bisher nicht angesprochen hat.

[Raketenwilli]

@Raketenwilli Die schlechte Beleuchtung trifft wohl auf Dein Gedankenstübchen z, da meine Wenigkeit dieses Thema bisher nicht angesprochen hat.

Du kannst Dich als Lawrow-Ersatz bewerben. Die im Kreml-Bonker hockenden halten nämlich auch nicht so viel von Tatsachennähe…

[Rolf B]

Hallo Raketenwilli,

lass uns bei CSS bleiben, ja?

Rolf

[Rolf B]

Hallo Raketenwilli,

Deliquent

ist ein unnötiger Begriff. Du unterstellst damit Kriminalität. Gunnar hat zu diesem Zweck Hanlons Rasiermesser ins Spiel gebracht.

"Bewerben" ist das noch nicht, finde ich. Und in den Profilen anderer Leute herumzueditieren, um den Link zu beseitigen, wäre nur bei nachweislich kriminellem Inhalt statthaft.

Das Verkünden von nachweislichem Schwachsinn eines Irregeleiteten ist aber nicht per se kriminell.

Rolf

[Prinz Steffen von Lübben]

Vielen Dank @Rolf B für Deine Nachgedanken,

Das Verkünden von nachweislichem Schwachsinn eines Irregeleiteten ist aber nicht per se kriminell.

ergänzend wäre zu bemerken das "nachweislicher Schwachsinn" erst mal nachgewiesen werden sollte, was ja mit den bisherigen bloßen Behauptungen nicht geschehen ist.

[Rolf B]

Die Reichsbürgerthesen sind längst als Unsinn entlarvt. Dass das von den Quatschenden ignoriert wird, oder dass aus falschen Prämissen munter irgendwas gefolgert wird (was logisch völlig korrekt ablaufen kann, aber die Folgerungen dadurch nicht relevant macht), bedeutet nicht, dass keine Entlarvung vorliegt. Darüber diskutieren, oder gar meine Zeit mit dem Niederschreiben von Nachweisen vergeuden, werde ich nicht.

Lass uns lieber bei CSS bleiben.

[Prinz Steffen von Lübben]

Lass uns lieber bei CSS bleiben.

@Rolf B das hatte ich von Anfang an vor, doch habe ich bisher keine vernünftige Antwort bekommen 😉

[Matthias Scharwies]

Servus!

Lass uns lieber bei CSS bleiben.

@Rolf B das hatte ich von Anfang an vor, doch habe ich bisher keine vernünftige Antwort bekommen 😉

Doch!

Du hattest im von Dir geposteten Code (<div id="Kopf">) ja bereits ids verwendet.

Das von Rolf verlinkte Tutorial zeigt, wie man so mit CSS nicht alle Vorkommen eines Elements, sondern nur einige (mit Klassen) oder nur eines über die id anspricht.

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Moin,

Das von Rolf verlinkte Tutorial zeigt, wie man so mit CSS nicht alle Vorkommen eines Elements, sondern nur einige (mit Klassen) oder nur eines über die id anspricht.

... oder eine bestimmte Gruppe von Elementen anhand der Struktur des Markups (z.B. mit dem Nachfahren- oder Kindselektor). Und wie man all diese Möglichkeiten auch kombinieren kann.

Einen schönen Tag noch
 Martin

[Prinz Steffen von Lübben]

...

Du hattest im von Dir geposteten Code (<div id="Kopf">) ja bereits ids verwendet.

Das von Rolf verlinkte Tutorial zeigt, wie man so mit CSS nicht alle Vorkommen eines Elements, sondern nur einige (mit Klassen) oder nur eines über die id anspricht.

...

nunj, @Matthias Scharwies soweit konnte ich den Gedankengang schon nachvollziehen.

Doch war ja die Frage, ob/wie ich die table.css auf einen Bereich beschränkt zuweisen kann, da diese auch nur im speziellen Fall gebraucht wird.

[Rolf B]

Hallo Steffen,

ja okay.

Also eine von außen beigestellte Eingrenzung der Wirksamkeit von table.css auf einen bestimmten Bereich des HTML? Nein, ich glaube das geht nicht.

Zumindest nicht ohne gewaltige Umstände - man könnte ein benutzerspezifisches Element mit Schatten-DOM erzeugen, was aber eine ziemlich große Kanone für diesen Spatzen wäre.

Versuche das table.css so zu ergänzen, dass die Selektoren darin nur für Tables gilt, die eine bestimmte Klasse tragen (eine bestimmte ID wäre aus meiner Sicht zu unflexibel). Diese Klasse sollte nach Möglichkeit so benannt sein, dass sie einen Sachverhalt beschreibt, keinen Formatierungwunsch (Klassen wie "rot" oder "rechts", die eine Farbe oder Ausrichtung beschreiben, sind nicht im Sinne des Klassenkonzepts). Für Preislisten würde man eine Klasse "preise" vergeben, nicht "dreispaltig". Das table.css wäre dann sinnvollerweise ein "preisliste.css".

Frameworks wie Bootstrap kehren das um und verwenden layoutbezogene Klassen. Aus Sicht der Selfer (nicht nur) ist das aber entgegen der Idee von HTML Elementklassen, wie sie die HTML Spezfikation beschreibt.

Rolf

[Prinz Steffen von Lübben]

Hallo Steffen,

ja okay.

Also eine von außen beigestellte Eingrenzung der Wirksamkeit von table.css auf einen bestimmten Bereich des HTML? Nein, ich glaube das geht nicht.

Zumindest nicht ohne gewaltige Umstände - man könnte ein benutzerspezifisches Element mit Schatten-DOM erzeugen, was aber eine ziemlich große Kanone für diesen Spatzen wäre.

Versuche das table.css so zu ergänzen, dass die Selektoren darin nur für Tables gilt, die eine bestimmte Klasse tragen (eine bestimmte ID wäre aus meiner Sicht zu unflexibel). Diese Klasse sollte nach Möglichkeit so benannt sein, dass sie einen Sachverhalt beschreibt, keinen Formatierungwunsch (Klassen wie "rot" oder "rechts", die eine Farbe oder Ausrichtung beschreiben, sind nicht im Sinne des Klassenkonzepts). Für Preislisten würde man eine Klasse "preise" vergeben, nicht "dreispaltig". Das table.css wäre dann sinnvollerweise ein "preisliste.css".

Frameworks wie Bootstrap kehren das um und verwenden layoutbezogene Klassen. Aus Sicht der Selfer (nicht nur) ist das aber entgegen der Idee von HTML Elementklassen, wie sie die HTML Spezfikation beschreibt.

Rolf

Herzlichen Dank @Rolf B für diese nette ausführliche Antwort, hoffe sie umsetzen zu können, nachdem ich sie verstanden habe 😉

[Prinz Steffen von Lübben]

Bisheriger Code der table.css war

table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid black;
      }
thead {
        position: sticky; top: 0;
        background: blue;
        color: green;
}
td {
        border: 1px solid black;
      }
th {
        font-family: 'UnifrakturMaguntia', cursive;
        border: 1px solid black;
        font-size: 36px;
        height: 36px;
      }
tbody tr:nth-child(odd) {
        background: #8fbc8f;
      }
tbody tr:nth-child(even) {
        background: #8fbc8f;
      }

weshalb sich der Code in seiner Ausführung auf alle mit table erstellten Beiträge, also auch Kopf.php & Fuß.php in der bewussten Seite erstreckte.

[Jörg Lanz von Liebenfels]

Hallo Steffen,

@Rolf und @Matthias Scharwies haben dir gesagt, wie der normale Weg geht. Das hat nichts damit zu tun, dass sie dir das „CSS beschränken“ ausreden wollen.

Deshalb ist Rolfs letzte Antwort auch eher nicht hilfreich, weil sie hypotethische Lösungen erwähnt, aber von der einfachsten Lösung ablenkt.

Bisheriger Code der table.css war

table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid black;
      }
thead {
        position: sticky; top: 0;
        background: blue;
        color: green;
}
td {
        border: 1px solid black;
      }
th {
        font-family: 'UnifrakturMaguntia', cursive;
        border: 1px solid black;
        font-size: 36px;
        height: 36px;
      }
tbody tr:nth-child(odd) {
        background: #8fbc8f;
      }
tbody tr:nth-child(even) {
        background: #8fbc8f;
      }

weshalb sich der Code in seiner Ausführung auf alle mit table erstellten Beiträge, also auch Kopf.php & Fuß.php in der bewussten Seite erstreckte.

Ja, genau wie im verlinkten Tutorial beschrieben.

Deshalb musst du der gewünschten Tabelle eine Klasse oder id geben und Dein table.css (Warum nicht alles in ein Stylesheet?) entsprechend anpassen:

#die-eine-table {
         width: 100%;
         border-collapse: collapse;
         border: 1px solid black;
}
#die-eine-table thead {
         position: sticky; top: 0;
         background: blue;
         color: green;
}
#die-eine-table td {
         border: 1px solid black;
}
#die-eine-table th {
         font-family: 'UnifrakturMaguntia', cursive;
         border: 1px solid black;
         font-size: 36px;
         line-height: 100%;
}

Und dafür hast du jetzt mehrmals gequengelt, dass Dir keiner geholfen hätte?

Adliger Gruß

Jörg Lanz von Liebenfels

[Gunnar Bittersmann]

@@Jörg Lanz von Liebenfels

… aber von der einfachsten Lösung ablenkt.

Am einfachsten wäre

#die-eine-table {
  …

  & thead { … }

  & td { … }

  & th { … }
}

bzw.

.die-eine-oder-andere-table {
  …

  & thead { … }

  & td { … }

  & th { … }
}

Heute in Ihrem Präprozessor; demnächst in Ihrem Browser.

🖖 Живіть довго і процвітайте

[Prinz Steffen von Lübben]

Danke @Gunnar Bittersmann,

#die-eine-table { …

& thead { … }

& td { … }

& th { … } }

... ja, diese Frage/Lösung wäre die passende Art, in der Hoffnung, daß es klappt!

verbeug

[Prinz Steffen von Lübben]

Hallo @Jörg

Deshalb musst du der gewünschten Tabelle eine Klasse oder id geben und Dein table.css (Warum nicht alles in ein Stylesheet?) entsprechend anpassen:

#die-eine-table {
         width: 100%;
         border-collapse: collapse;
         border: 1px solid black;
}
#die-eine-table thead {
         position: sticky; top: 0;
         background: blue;
         color: green;
}
#die-eine-table td {
         border: 1px solid black;
}
#die-eine-table th {
         font-family: 'UnifrakturMaguntia', cursive;
         border: 1px solid black;
         font-size: 36px;
         line-height: 100%;
}

Ich hab das jetzt erstmal soweit gelöst:

.HWSB {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid black;
      }
thead {
        position: sticky; top: 0;
        background: blue;
        color: green;
}
.HWSB-td {
        border: 1px solid black;
      }
th {
        font-family: 'UnifrakturMaguntia', cursive;
        border: 1px solid black;
        font-size: 36px;
        height: 36px;
      }

ob ich die verschiedenen Stylesheet vereine .. mal überlegen

Edit Rolf B: Block-Code gefixt

[Rolf B]

Hallo Steffen,

wenn du möchtest, dass td Elemente in einer Table, die die Klasse .HWSB trägt, CSS formatiert werden, musst Du dafür nicht jedem td eine Klasse geben. Statt dessen verwendest Du den "Nachfahren-Kombinator" - einfach ein Space.

.HWSB td {
   /* Styles für td in .HWSB
}

Du solltest wirklich das Tutorial durcharbeiten, dass ich Dir verlinkt hatte. Da steht genau sowas drin.

Rolf

[Prinz Steffen von Lübben]

Hallo Steffen,

wenn du möchtest, dass td Elemente in einer Table, die die Klasse .HWSB trägt, CSS formatiert werden, musst Du dafür nicht jedem td eine Klasse geben. Statt dessen verwendest Du den "Nachfahren-Kombinator" - einfach ein Space.

.HWSB td {
   /* Styles für td in .HWSB
}

... vielen Dank für den erleichternden Hinweis, alles hat seine Zeit 😉 Es ist das eine, eine Information zu lesen & das andere, sie zu verstehen.

[Rolf B]

Hallo Steffen,

wenn Du unter einer vernünftigen Antwort verstehst, dass ich Dir Zeile für Zeile vorkaue, wie Du deine Seite ändern musst, dann müsstest Du bitte den Stundensatz dafür entrichten. Im Voraus, gemäß deiner eigenen Preisliste, auf das Selfhtml Spendenkonto. Bitte plane drei Stunden ein. Ganz einfach - und damit taugt das auch was.

Ich habe Dir bereits mitgeteilt, dass dein Problem in zu unspezifischen Selektoren besteht, und das genannte Tutorial wird Dich soweit aufschlauen, dass Du das Problem als souveräner Mensch lösen kannst.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ich weiß nicht, wer für 16:29 ein + verteilt hat - ich bitte, das rückgängig zu machen.

Ich bin deinem Wunsch nachgekommen. Im Gegenzug bitte ich dich, meinem Wunsch nachzukommen und die Löschung von Raketenwillis Beitrag rüchgängig zu machen.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

wie du meinst. Ich würde es aber bevorzugen, den Thread rein auf das Sachthema zu beschränken.

Rolf

[Raketenwilli]

Als ich in den späten Neunzigern des letzten Jahrhunderts des letzten Jahrtausends auf die ersten Reichsbürgerseiten gestoßen bin, hatte ich gedacht:

„Was für ein Joke, die Jungs machen aber grobe Späße!“

Inzwischen weiß ich, dass es sich um einen Haufen Typen handelt, die ich lieber ordnungsgemäß medizinisch versorgt und behandelt sähe weil die das ernst meinen und sehe es als äußerst kontraproduktiv, sogar als gefährlich an, bei deren Tun oder Propaganda auch nur irgendeine Beihilfe zu leisten. Ich wäre froh, wenn Du Deinen „Gesichtserker“ nicht in dieses Forum steckst.

Insofern kannst Du froh sein, dass Rolf B Dich wenigstens auf die, zu Deinem Problem passende Literatur hingewiesen hat.