Wie mit toggle Inline-Elemente ein- & ausklappen? (nur über CSS)

[MB]

moin,

Frage
Wie erreicht man, dass sich die Länge eines Inline-Elementes im Text auf null reduziert und sich nur über ein CSS Event des selbigen Elementes wieder auf die ursprüngliche Länge zurück setzt?

Background
Ich will die in HTML gerenderten Markdown-Kommentare für einen besseren Lesefluss über einen Toggle des selben Kommentars einklappen können.

Frage Nebenbei
Ohne JavaScript ist es nicht möglich, über eine GUI-Interaktion mit Element A, Element(e) B zu steuern, welche, außer einer gemeinsamen Klasse und Geschwister-Elemente im DOM, mit diesem Element A nichts weiterhin gemein haben, oder? Nur über JS krigt man die Verbindung der Geschwister Elemente im DOM hin, aber nicht über CSS, oder?

Background der Frage Nebenbei
Ich Frage bezüglich dieser in HTML gerenderten Markdown-Kommentar-Elemente hier:
Ich möchte mit einem Maus-Klick auf ein "eingeklapptes" Kommentar-Element mit CSS erreichen, dass all die "eingeklappten" Geschwister Kommentar-Elemente des geklickten Elementes, "mit-ausgeklappt" werden, wie das geklickte Kommentar-Element selbst auch.

lgmb

[MB]

Was ich gemacht habe
Ich habe die "Delimiter"-Kommentare (hier %%) ausgeblendet, die den Kommentar umschließen. Mit Ausname der "Delimiter"-Kommentare…

• …die nichts kommentieren (hier %%%%)
• …wo der Anfangs-"Delimiter"-Kommentar nicht am Ende einer Zeile steht.

…die "Delimiter"-Kommentare, die die Ausnahme-Kriterien erfüllen, sind nicht ausgeblendet.

Ausschnitt:

<div class=“line“>
  qux
  <span class="comment comment-start">%%</span>
  <span class="comment">foo</span>
  <span class="comment comment-end">%%</span>
  bar
  <span class="comment comment-start">%%</span>
</div>
<div class="line">
  tok
  <span class="comment comment-end">%%</span>
</div>

.comment-start:has(
  + .comment:not( .comment-end ),
  .comment:not( * )
),
.comment-end:not(
  .comment-start + .comment-end
) {
  display: none
}
.comment:not(
  .comment-start,
  .comment-end
) {
  /* … */
}

Resultat:
quxbar

Welche Probleme auftraten
Ich schaffe es nicht mit meinem dürftigen CSS Wissen und meinen Recherchen, ein Inline Text Abschnitt horizontal einklappen zu können und nur über ein Event dieses Inline Textes wieder auszuklappen.

• Mit display: none blende ich zwar das komplette Kommentar-Element aus, jedoch gibt es keine Möglichkeit, überhaupt per GUI mit diesem Element zu interagieren, weil es ja ausgeblendet ist.
• Mit display: inline kriege ich die Größe des Kommentar-Elementes nicht modifiziert, obwohl dies mein Ziel ist.
• Mit display: inline-block kann ich zwar die Größe des Kommentar-Elementes festlegen, jedoch passt das modifizierte Element nicht mehr in den Textfluss der anderen inline-Elemente, da es ja ein inline-block Element ist - so schätze ich Aufgrund meiner Versuche.

Mein Workaround der Probleme
Ich habe display: inline-block verwendet, um zumindest die Größe des Elementes im Textfluss zu ändern. Mit overflow: hidden, white-space: nowrap, width:0 und height:0 habe ich den Text ausgeblendet, der technisch gesehen innerhalb des Kommentar-Elementes liegt, aber visuell außerhalb des anzeigbaren Rahmens. (Schon mal gut).
Ich habe versucht mit &::before und content:"*" das Kommentar-Element so zu gestalten, dass nur das Sternchen (*) angezeigt wird.

Analyse des Workarounds
(Wie schon mit dem display: none Problem) Diese Konfiguration verhindert, das alle Child-Elemente des Kommentar-Elementes nicht angezeigt werden können, auch das ::before-Element.

Mein Workaround-Workaround der Probleme
…Darum habe ich mit width:0.5em und height:1em einen kleinen Ausschnitt des Elementes im Textfluss so gestaltet, dass wieder ein Stückchen Kommentar-Element angezeigt werden kann. So ist wieder ein CSS Event des Kommentar-Elementes möglich (z.B. :hover oder :active).

.comment:not(
  .comment-start,
  .comment-end
) {
  /* … */
}
  display:inline-block;
  position: relative;
  width: 0.5em;
  height:1em;
  overflow: hidden;
  white-space: nowrap;
  &:active {
    width: inherit !important;
    height:inherit !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  &::before {
    display:inline-block;
    position: relative;
    content: "*";
  }
}

Analyse des Workaround-Workaround
Das ist meine laihenhafte und dürftige Lösung 😕.

Auf meine Lösung bezogene Frage
Ist dies die einzige Lösung meines Problems? Und wenn ja, wie bekomme ich dieses Inline-Block-Kommentar-Element so justiert und eingegliedert, dass es sich wieder wie ein Inline-Element verhält und die Dimensionen eines *-Zeichens annimmt.

[Rolf B]

Hallo MB,

ich habe dieses Wochenende kaum Zeit.

Inline Elemente reagieren nicht auf width und height, so weit ich weiß. Du könntest es aber mit font-size:0 versuchen. Das Sternchen im ::before könnte dann mit eigener font-size Angabe wieder auf lesbare Größe gebracht werden.

Um per CSS von einem Element aus das Nachbarelement zu beeinflussen, gibt es die Kombinatoren + (direkter Nachfolger) und ~ (irgendein Nachfolger).

Dass eine reine Maussteuerung (:hover) unbedienbar ist, weißt du ja mittlerweile. Für dein persönliches Obsidian-Projekt kannst du die Relevanz dieses Problems selbst beurteilen. In einer öffentlichen Webseite wäre es, wie Gunnar es nannte, Mist.

Rolf

[MB]

moin,

ich habe dieses Wochenende kaum Zeit.

ich bin enspannt 😉👍. Frohes Schaffen…

Inline Elemente reagieren nicht auf width und height, so weit ich weiß. Du könntest es aber mit font-size:0 versuchen. Das Sternchen im ::before könnte dann mit eigener font-size Angabe wieder auf lesbare Größe gebracht werden.

Danke für den Tipp!!!

Um per CSS von einem Element aus das Nachbarelement zu beeinflussen, gibt es die Kombinatoren + (direkter Nachfolger) und ~ (irgendein Nachfolger).

Danke Dir!!! 😀👍

[…] Dass eine reine Maussteuerung (:hover) unbedienbar ist, weißt du ja mittlerweile.

👍

[…] Für dein persönliches Obsidian-Projekt kannst du die Relevanz dieses Problems selbst beurteilen. […]

Tue ich 😀

[…] In einer öffentlichen Webseite wäre es, wie Gunnar es nannte, Mist.

Klar ohne Frage!

lgmb

[Gunnar Bittersmann]

@@MB

Frage
Wie erreicht man, dass sich die Länge eines Inline-Elementes im Text auf null reduziert und sich nur über ein CSS Event des selbigen Elementes wieder auf die ursprüngliche Länge zurück setzt?

Es gibt keine CSS-Events. (Weder mit noch ohne Deppenleerzeichen.)

Background
Ich will die in HTML gerenderten Markdown-Kommentare für einen besseren Lesefluss über einen Toggle des selben Kommentars einklappen können.

Das klappt mit dem details-Element.

Frage Nebenbei
Ohne JavaScript ist es nicht möglich, über eine GUI-Interaktion mit Element A, Element(e) B zu steuern, welche, außer einer gemeinsamen Klasse und Geschwister-Elemente im DOM, mit diesem Element A nichts weiterhin gemein haben, oder? Nur über JS krigt man die Verbindung der Geschwister Elemente im DOM hin, aber nicht über CSS, oder?

Doch, das ist es.

Es ist aber nicht sinnvoll, da „CSS-only-Lösungen“ i.d.R. keine Lösungen sind, sondern nicht von allen bedienbarer Mist.

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

[MB]

moin,

[…] und sich nur über ein CSS Event des selbigen Elementes […]

Es gibt keine CSS-Events. […]

Sry, ich meinte "Pseudo-Selektoren".

Wie zuvor schon erwähnt, habe ich den Tag damit verbracht, den Text meiner Eingangsfrage mit Hilfe eines Text-to-Speech Tool "bestmöglichst" für das Forum klar, verständlich und strukturiert zu gestalten, damit mir keine groben Fehler mehr passieren wie zuvor.

Die Phrase CSS Event habe ich bis zuletzt nicht umgeändert, da mir der Begriff "Pseudo-Selektor" beim Verfassen des Textes nicht eingefallen ist. Bevor ich die Eingangsfrage eingesendet hatte, wollte ich später beim feinschliff u.a. diesen Begriff richtigstellen.

Ohne JavaScript ist es nicht möglich, über eine GUI-Interaktion mit Element A, Element(e) B zu steuern, […]

Doch, das ist es.[…]

😃 sehr schön! Hast du Referenzen?

Es ist aber nicht sinnvoll, da „CSS-only-Lösungen“ i.d.R. keine Lösungen sind, sondern nicht von allen bedienbarer Mist.

Das ist mir sicherlich klar. Da ich ein 10 Jahre altes Notebook habe (was damals High-End war) und mir kein High-End Notebook u.a. für Obsidian Plugins leisten kann, muss ich auf CSS-Snippets von Obsidian zurückgreifen, um das LAF in Obsidian anzugleichen - was mir mit eurer Hilfe gut gelungen ist 😉.

lgmb

P.S. Ich spiele keine Computer-Spiele, die ein High-End fordern. Ich hab damals das High-End Notbook genutzt, um möglichst viele weitere Jahre später immer noch up-to-date mit meinem System zu sein. Zudem ist es für einen Computer "äußerst" Energie effizient (auch wenn mein Notbook schon 10 Jahre alt ist 😀 👍).

[Robert B.]

Moin,

Da ich ein 10 Jahre altes Notebook habe (was damals High-End war) und mir kein High-End Notebook u.a. für Obsidian Plugins leisten kann, muss ich auf CSS-Snippets von Obsidian zurückgreifen, um das LAF in Obsidian anzugleichen - was mir mit eurer Hilfe gut gelungen ist 😉.

vermutlich wäre die Performance von Obsidian um einiges besser, wenn das generierte DOM von Divitis und Spanitis geheilt würde … Und deine Zeit wäre wohl auch besser investiert (es sei denn, du kannst die Stunden abrechnen).

Viele Grüße
Robert

[MB]

moin,

Moin,

Da ich ein 10 Jahre altes Notebook habe (was damals High-End war) und mir kein High-End Notebook u.a. für Obsidian Plugins leisten kann, muss ich auf CSS-Snippets von Obsidian zurückgreifen, um das LAF in Obsidian anzugleichen - was mir mit eurer Hilfe gut gelungen ist 😉.

vermutlich wäre die Performance von Obsidian um einiges besser, wenn das generierte DOM von Divitis und Spanitis geheilt würde … Und deine Zeit wäre wohl auch besser investiert (es sei denn, du kannst die Stunden abrechnen).

Du, da bin ich raus. Ich weis das aber, dass das GUI Obsidian-App natürlich keiner Webseite ist und mit DOM anders umgeht als Websiten. Zumal es verschiedene "Views" (nicht im CSS Kontext) in der GUI gibt (source, preview, view) und nicht nur einen einzigen, wie bei einer Website.

lgmb

[Robert B.]

Moin,

vermutlich wäre die Performance von Obsidian um einiges besser, wenn das generierte DOM von Divitis und Spanitis geheilt würde … Und deine Zeit wäre wohl auch besser investiert (es sei denn, du kannst die Stunden abrechnen).

Du, da bin ich raus. Ich weis das aber, dass das GUI Obsidian-App natürlich keiner Webseite ist und mit DOM anders umgeht als Websiten. Zumal es verschiedene "Views" (nicht im CSS Kontext) in der GUI gibt (source, preview, view) und nicht nur einen einzigen, wie bei einer Website.

aber es nimmt doch deine CSS-Schnipsel zur Anpassung der Darstellung.

Was lässt sich denn über die Software Obsidian herausfinden:

Obsidian is built on Electron.

Und Electron ist (mit Hervorhebungen von mir):

Electron […] is designed to create desktop applications using web technologies (mainly HTML, CSS and JavaScript, although other technologies such as front-end frameworks and WebAssembly are possible) that are rendered using a version of the Chromium browser engine and a back end using the Node.js runtime environment.

Vielleicht kommen deine Performance-Herausforderungen auch hierher 😉

Viele Grüße
Robert

[MB]

moin,

vermutlich wäre die Performance von Obsidian um einiges besser, […]

Du, da bin ich raus. […]

aber es nimmt doch deine CSS-Schnipsel zur Anpassung der Darstellung.

Das ist richtig, warum 🤨? Sry, mir fehlt der Kontext 😅.

Obsidian is built on Electron.

Und Electron ist (mit Hervorhebungen von mir):

Electron […]

Vielleicht kommen deine Performance-Herausforderungen auch hierher 😉

Bitte entschuldige. Ich hab zun Sachzusammenhang nicht verstanden 😟.
Kannst du mir sagen, wo du den Beitrag hier im Forum, von wem, welcher "Wiki" und "Eletron" enthält, her hast den du hier referenzierst? Ich hab nur meine Persofmance-Herausforderung verstanden 🤷.

Was ich allerdings bzgl. Wiki, Electron und Obsidian sagen kann, das ich den engl. Artikel über Obsidian vor entwas längerer Zeit gelesen bzw. überflogen habe. Da durch ist mir Electron ein Begriff und ich weis, das Obdisian u.a. Nodejs verwendet und noch mehr aber da bin ich überfragt. Ich arbeite ja mit den Development Tools für die Snippets. Ich will ersteinmal die hinkriegen.

Zu meiner Intension, warum ich dier CSS-Snippets entwickele:

• Die (Wiki)-Links sind mir zu sehr in einer Farbe hervorgehoben.
  (Und ich verwende seeeehr viele dieser Links in meinen Notes 😀👍. 2/3 Text, rest Links da ich sehr kurze Stichpunkte schreibe, die noch den Sachzusammenhang erkennen lassen.)
• Überschriften sind weder nummeriert…
• …noch farblich hervorgehoben.
• Die Überschriften haben keine Icons…
• …und sind nich eingerückt
• Die kommentare kann mann nicht ausblenden

All das bin ich gerade dabei mit CSS Snippets zu ändern, für eine bessere Lesbarkeit.

lgmb

[Robert B.]

Moin,

Du, da bin ich raus. […]

aber es nimmt doch deine CSS-Schnipsel zur Anpassung der Darstellung.

Das ist richtig, warum 🤨? Sry, mir fehlt der Kontext 😅.

Der Kontext stand dort, wo jetzt die Auslassung im Zitat steht:

Ich weis das aber, dass das GUI Obsidian-App natürlich keiner Webseite ist und mit DOM anders umgeht als Websiten.

Mit CSS wird HTML gestylt und HTML zeichnet Webdokumente/-seiten aus. Und dass Obsidian die Webseiten in einem Webbrowser darstellt, habe ich für dich in der englischen Wikipedia gefunden und daraus zitiert, die Links sogar gleich mit angegeben. Ich dachte eigentlich, dass ein Link direkt von einem Zitat eindeutig ist, aber deine Rückfrage untermauert die Bedeutung des cite-Attributs für Zitat-Elemente in HTML.

Obsidian is built on Electron.

Und Electron ist (mit Hervorhebungen von mir):

Electron […]

Vielleicht kommen deine Performance-Herausforderungen auch hierher 😉

Bitte entschuldige. Ich hab zun Sachzusammenhang nicht verstanden 😟.

Obsidian ist eine HTML-Anwendung, die NodeJS und einen kompletten Google-Browser für die GUI verwendet (so steht es bei Wikipedia), mithin mehrere hundert Megabyte Plattenplatz und locker um 1 Gigabyte RAM belegt. Das muss ein Computer erst einmal alles stemmen (können). Dazu kommt, dass das HTML, welches Obsidian zur Darstellung verwendet, auch noch an Divitis und Spanitis krankt, das dargestellte DOM also zusätzlich zur großen Runtime auch noch ineffizient und „aufgeblasen“ ist.

Viele Grüße
Robert

[MB]

moin,

Moin,

Du, da bin ich raus. […]

aber es nimmt doch deine CSS-Schnipsel zur Anpassung der Darstellung.

Das ist richtig, warum 🤨? Sry, mir fehlt der Kontext 😅.

Der Kontext stand dort, wo jetzt die Auslassung im Zitat steht:

Den checke ich ja nicht auch ohne Auslassungszeichen.

Ich weis das aber, dass das GUI Obsidian-App natürlich keiner Webseite ist und mit DOM anders umgeht als Websiten.

Mit CSS wird HTML gestylt und HTML zeichnet Webdokumente/-seiten aus. Und dass Obsidian die Webseiten in einem Webbrowser darstellt, habe ich für dich in der englischen Wikipedia gefunden und daraus zitiert, die Links sogar gleich mit angegeben. […]

Ok Danke für die Erläuterung 👍.

[…] Ich dachte eigentlich, dass ein Link direkt von einem Zitat eindeutig ist, aber deine Rückfrage untermauert die Bedeutung des cite-Attributs für Zitat-Elemente in HTML.

Natürlich weis ich das, und kenne die Bedeutung, wenn ich dich richtig verstehe versteht sich. Mir war nur nich klar, dass man hier im Forum nicht eine explizite Angabe machen muss, woher das Zitat stammt.

Bitte entschuldige. Ich hab zun Sachzusammenhang nicht verstanden 😟.

Obsidian ist eine HTML-Anwendung, die NodeJS und einen kompletten Google-Browser für die GUI verwendet (so steht es bei Wikipedia), mithin mehrere hundert Megabyte Plattenplatz und locker um 1 Gigabyte RAM belegt. Das muss ein Computer erst einmal alles stemmen (können). Dazu kommt, dass das HTML, welches Obsidian zur Darstellung verwendet, auch noch an Divitis und Spanitis krankt, das dargestellte DOM also zusätzlich zur großen Runtime auch noch ineffizient und „aufgeblasen“ ist.

Das ist mir bekannt. Dennch ist es für mich das kleinere Übel. Du hast deine Ausführungen für mich verständlich ausgedrückt. Danke dir 👍.

Kennst du bessere Note-Taking Programme die…

• …teilweise von ihrwre Funktionalität her Kostenlos sind?
• …auf dem Rechner zuhause laufen?
• …plattform unabhängig sind?
  (Linux, MacOS, Windows)

…, denn das waren meine Kritärien für eine Note-Taking-App. All das sind für mich sehr gute eigenschaften und Gründe. Zusätzlich kommt noch, das die App…

• …als Basis Markdown nutzt und sehr viel mehr Textauszeichnungen verwenden?
  (YAML Frontmatter, Callout, Math, UML usw.)
• …eine massive Community haben mit ihren Plugins?
• …extrem Konfigurierbar sind für den optimalen Nutzen und gebrauch?
• …Themes bereitstellen kann und annimmt
• …Commnity Plugins enbinden können?
  (JS, TypeScript, NodeJS)

Würd mich echt interessieren. Ich hab sehr viel im Internet gesucht (Evernote, Notion, Joblin, usw) und bin schlussentlich mit Obsidian fündig geworden 😍.

lgmb

[Robert B.]

Moin,

[…] Ich dachte eigentlich, dass ein Link direkt von einem Zitat eindeutig ist, aber deine Rückfrage untermauert die Bedeutung des cite-Attributs für Zitat-Elemente in HTML.

Natürlich weis ich das, und kenne die Bedeutung, wenn ich dich richtig verstehe versteht sich. Mir war nur nich klar, dass man hier im Forum nicht eine explizite Angabe machen muss, woher das Zitat stammt.

Die Links waren doch ziemlich prominent enthalten und in sehr dichtem Zusammenhang zu den jeweiligen Zitaten …

Obsidian ist eine HTML-Anwendung, die NodeJS und einen kompletten Google-Browser für die GUI verwendet (so steht es bei Wikipedia), mithin mehrere hundert Megabyte Plattenplatz und locker um 1 Gigabyte RAM belegt. Das muss ein Computer erst einmal alles stemmen (können). Dazu kommt, dass das HTML, welches Obsidian zur Darstellung verwendet, auch noch an Divitis und Spanitis krankt, das dargestellte DOM also zusätzlich zur großen Runtime auch noch ineffizient und „aufgeblasen“ ist.

Das ist mir bekannt. Dennch ist es für mich das kleinere Übel. Du hast deine Ausführungen für mich verständlich ausgedrückt. Danke dir 👍.

Keine Ursache.
Wenn du mit dem Performance-Footprint leben kannst und die Software deinen Anforderungen genügt, dann ist doch alles für dich alles in Butter.

Kennst du bessere Note-Taking Programme die…

• …teilweise von ihrwre Funktionalität her Kostenlos sind?
• …auf dem Rechner zuhause laufen?
• …plattform unabhängig sind?
  (Linux, MacOS, Windows)

Ich schreibe Markdown in Notepad++ (Windows) oder xed (Linux) – ansonsten gibt es noch den Org-Mode in Emacs, der ziemlich plattform-übergreifend ist 😉 (Und für spezielle Sachen noch Jupyter-Notebooks.)

… Zusätzlich kommt noch, das die App…

• …als Basis Markdown nutzt und sehr viel mehr Textauszeichnungen verwenden?
  (YAML Frontmatter, Callout, Math, UML usw.)
• …eine massive Community haben mit ihren Plugins?
• …extrem Konfigurierbar sind für den optimalen Nutzen und gebrauch?
• …Themes bereitstellen kann und annimmt
• …Commnity Plugins enbinden können?
  (JS, TypeScript, NodeJS)

Wie viel davon wird denn tatsächlich benötigt?

Würd mich echt interessieren. Ich hab sehr viel im Internet gesucht (Evernote, Notion, Joblin, usw) und bin schlussentlich mit Obsidian fündig geworden 😍.

Ja, da gibt es einiges für jeden Geschmack …

Viele Grüße
Robert

[MB]

moin,

[…]

Die Links waren doch ziemlich prominent enthalten und in sehr dichtem Zusammenhang zu den jeweiligen Zitaten …

Da gebe ich Dir recht. Wenn ich mich intensiver mit den Zitaten befasst hätte, dann wäre mir sicherlich vieles klarer geworden. Jedoch stehe ich unter mir auferlegten Zeitdruck, diese für mich notwendigen Snippets als CSS Laihe hinzukriegen. So habe ich deine angeführten Zitate nicht gerallt 🤷, sry.

[…]. Dennch ist es für mich das kleinere Übel. Du hast deine Ausführungen für mich verständlich ausgedrückt. Danke dir 👍.

Keine Ursache.
Wenn du mit dem Performance-Footprint leben kannst und die Software deinen Anforderungen genügt, dann ist doch alles für dich alles in Butter.

Auf alle Fälle 😊👍!!!

Ich schreibe Markdown in Notepad++ (Windows) oder xed (Linux) – ansonsten gibt es noch den Org-Mode in Emacs, der ziemlich plattform-übergreifend ist 😉 (Und für spezielle Sachen noch Jupyter-Notebooks.)

Danke Dir 👍. War mir noch nicht bekannt und wäre auch denke ich für das Note-Taking ungeeigneter soweit ich hier in Wiki lese. Aber ich bin da auch außen vor und kenn sie nur durch dich.

… Zusätzlich kommt noch, das die App… […]

Wie viel davon wird denn tatsächlich benötigt?

Nach belieben. Je nach Anwendungsfällen hast du dafür Plugins! Obsidian ist durch seine Community-Plugins, sehr viel mächtiger als nur eine Note-Taking-App (und die ist schon mächtig!), durch sie aber auch mit jedem Plugin mehr fehleranfälliger, weil die Community-Plugins sich gegenseitig behindern und mehr Rechenaufwand produzieren als nur ein Community Plugin, wenn sie laufen. So meine Erfahrung und teilweise auch von Autoren hingewiesen.

Würd mich echt interessieren. Ich hab sehr viel im Internet gesucht (Evernote, Notion, Joblin, usw) und bin schlussentlich mit Obsidian fündig geworden 😍.

Ja, da gibt es einiges für jeden Geschmack …

Kenn ich zum Teil und die habe ich alle Ausgeschlossen, weil sie nicht meine Kritärien genügen, die ich an sie gestellt habe. Ich muss aber auch dazu sagen, das ich nur mit Obsidian einschlägige erfahrungen gemacht habe.

lgmb

[MB]

moin,

Frage
Ist es möglich, dass man mit einer Kombination aus Geschwisterselektor ~ (oder Next-Sibling Combinator?) und anderen Pseudo-Selektoren (und/oder) (weitere/andere) Selektoren nur die nächsten Elemente bis zu einem bestimmten Marker-Element selektiert werden, und alle weiteren Elemente die nur mit ~ selektiert werden würden nicht? Sprich: nicht alle im Parent-Element?

Schema meiner Vorstellung
Schema der mehrfachen Selektierung der Elemente bis zu einem bestimmten Marker-Element, in diesem Fall: vom start bis ende:
text start comment … comment end text start comment … comment end text start comment … comment end text

Was ich gemacht habe
Ich habe den "Comment-Start-Delimiter" (%%) als "Collapse-Indicator" verwendet.
Die "Comment-End-Delimiter" (%%) und die "Comments" sind mit display: none; im Normal-Zustand ausgeblendet. Wenn man auf einer der "Comment-Start-Delimiter" klickt und gedrückt hält, werden mit Hilfe von display: inline; die "Comments" und "Comment-End-Delimiter" mit Hilfe von display: inline-block; angezeigt.

Ausschnitt:

<div class="line">
  text
  <span class="start">%%</span>
  <span class="comment">Lorem ipsum</span>
  <span class="end">%%</span>
  text
  <span class="start">%%</span>
  <span class="comment">[</span>
  <span class="comment">dolor</span>
  <span class="comment">]</span>
  <span class="comment">(</span>
  <span class="comment">sit</span>
  <span class="comment">)</span>
  <span class="start">%%</span>
  text
</div>
<div class="line">
  text
  <span class="start">%%</span>
  <span class="comment">consetetur sadipscing elitr</span>
  <span class="end">%%</span>
  text
<div>

Resultat:

• ausgeblendet:
  text %% text %% text
text %% text
• "Collapse-Indicator" von "Lorem ipsum"-Kommentar geglickt:
  text %%Lorem ipsum%% text %%[dolor](sit)%% text
text %% text
• "Collapse-Indicator" von "[dolor](sit)"-Kommentar geglickt:
  text %% text %%[dolor](sit)%% text
text %% text
• "Collapse-Indicator" von "consetetur sadipscing elitr"-Kommentar geglickt:
  text %% text %% text
text %%consetetur sadipscing elitr%% text

Meine Untersuchungen
Durch das gedrückt klicken auf einen "Collapse-Indicator", werden alle "Comments", die nach dem geklickten Elemnt stehen, mit ihrem "Comment-End-Delimiter" im jeweiligen Parent-Element angezeigt.

Zu meiner näheren Untersuchung
Der "Comments"-Abschnitt beträgt n-Längen. D.h. ich kann nicht drauf hoffen, dass es nur ein einziges "Comments"-Element gibt in Form von .start + .comment + .end. Das habe ich hier ja schon im [dolor](sit)-Kommentar gezeigt. Hier wäre es .start + .comment + .comment + .comment+ .comment + .comment + .comment + .end.

Mein Verständnis des Problems
Wenn ich auf den "Collapse-Indicator" von Lorem ipsum-Kommentar gedrückt klicke, blenden sich alle diejenigen ein, die im ersten Parent-Element line sind also Lorem ipsum-Kommentar und [dolor](sit)-Kommentar. lorem ipsum-Kommentar nicht da er ja in einem anderen Parent-Element liegt. Wenn ich auf den "Collapse-Indicator" von [dolor](sit)-Kommentar gedrückt klicke, wird nur dieser Kommentar angezeigt da er der letzte Kommentar im Parent-Element ist und ~ selektiert nicht rückwärts.

Mein Fazit
Leider ist mir kein CSS Selektor-Kombination bekannt, die das bewerkstelligen kann.

Guten Abend,

lgmb

P.S.: Ich hoffe meine Metasyntaktischen Variablen sind zur besseren Kommunikation geeignet, da ich zu unkreativ bin, mir ein einfaches und konkretes Beispiel auszudenken. Und mit Obsidian-App-Szenarien, will ich euch nicht belästigen, den das würde - denke ich - eher zu noch mehr Fragen euerseits führen.

[Gunnar Bittersmann]

@@MB

Ist es möglich, dass man mit einer Kombination aus Geschwisterselektor ~ (oder Next-Sibling Combinator?) und anderen Pseudo-Selektoren (und/oder) (weitere/andere) Selektoren nur die nächsten Elemente bis zu einem bestimmten Marker-Element selektiert werden, und alle weiteren Elemente die nur mit ~ selektiert werden würden nicht? Sprich: nicht alle im Parent-Element?

Ja, aber schön ist anders. Du müsstest eine Liste mit mindestens so vielen .start + :not(.end) + … + :not(.end)-Selektoren erstellen wie du Elemente zwischen .start und .end haben kannst. Ein CSS-Präprozessor kann dabei helfen.

☞ Codepen

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

[MB]

moin,

Ist es möglich, dass man mit einer Kombination aus Geschwisterselektor ~ (oder Next-Sibling Combinator?) und anderen Pseudo-Selektoren (und/oder) (weitere/andere) Selektoren nur die nächsten Elemente bis zu einem bestimmten Marker-Element selektiert werden […]

Ja, aber schön ist anders. Du müsstest eine Liste mit mindestens so vielen .start + :not(.end) + … + :not(.end)-Selektoren erstellen wie du Elemente zwischen .start und .end haben kannst.

Vielen Herzlichen Dank für die AW 😀!!! Also muss ich mich gottseidank (und leider) nicht damit Rumquälen, weil eine CSS Selektor Kombination nicht klappen wird, wie ich es mit vorstelle. Ich hab's vermutet aber durch dich bestätigt bekommen.

P.S.: Ich hoffe inständig, das es eine abgespeckte Version von JS in Obsidian Core-Plugin geben wird 🙏 🙄!!! Das Obsidian Community-Plugin Superchange Links gibt's ja der dies und noch mehr bewerkstelligt, jedoch leider zuviel Rechenaufwand für mein System 😕.

lgmb

[Rolf B]

Hallo Gunnar,

Du müsstest eine Liste mit mindestens so vielen .start + :not(.end) + … + :not(.end)-Selektoren erstellen wie du Elemente zwischen .start und .end haben kannst.

Challenge accepted 😉

Ergebnis: 3 CSS Regeln genügen.

Regel 1: Aus per Default
Regel 2: .comment und .end hinter span.start:active sichtbar machen
Regel 3: Die .comment und .end, die hinter dem nächsten span.start folgen, wieder unsichtbar machen.

Ich hatte das so verstanden, dass die .end-Spans hinter .start ebenfalls per Default ausgeblendet sein sollen. Deshalb verwende ich nicht :not(.end), sondern span:is(.comment, .end).

span:is(.comment, .end) {
  display: none;
}

span.start:active ~ span:is(.comment, .end) {
  display: inline;
}

span.start:active ~ span:is(.comment, .end) ~ span.start ~ span:is(.comment, .end) {
  display: none;
}

Ich hab's auch mit nur 2 Regeln versucht, aber da konnte ich die Spezifische nicht alle angeln.

Man kann Regel 3 auch in Regel 2 hineinschachteln, dann sieht der Selektor nicht so entsetzlich lang aus, aber ich weiß nicht, ob der in Obsidious integrierter Browser das schon kennt.

Einfacher wär's ja, wenn man die .comment-Spans als Child-Element eines anderen Elements erzeugen könnte. Aber ich denke, das Obskurian-Markdown verweigert sich da?

Rolf

[MB]

moin,

Ergebnis: 3 CSS Regeln genügen.

Regel 1: Aus per Default
Regel 2: .comment und .end hinter span.start:active sichtbar machen
Regel 3: Die .comment und .end, die hinter dem nächsten span.start folgen, wieder unsichtbar machen.

Das ist die Lösung 😃!!! Ich hab's grade ebend in nem Dummy getestet 👍. Ich muss es in Obsidian übertragen!! DANKE, DANKE, DANKE!

Ich hab zwei ganze Tage dran gesessen und das versucht hinzubekommen und hatte mich gestern Nacht schlussentlich damit abfinden müssen, das es nicht geht, aber jetzt geht's mit deiner Hilfe. Simple Ausagenlogik würde ich sagen. Warum ist mir das nicht eingefallen 🤦. Man sieht den Wald vor lauter Bäumen nicht 🤷.

lgmb

[Rolf B]

Hallo MB,

Ich hab's grade ebend in nem Dummy getestet 👍

Ohne Test in einem Dummy würde ich sowas gar nicht erst posten 😀. Jetzt muss es nur noch in deinem elektronischen Obskurian funktionieren.

Man sieht den Wald vor lauter Bäumen nicht 🤷.

Nach 39 Jahren an der Tastatur hegt man angesichts eines Baumes aber den Verdacht, dass der Wald nicht weit sein kann, und lauscht auf das Grunzen der Wildschweine 😉

Rolf

[MB]

moin,

Hallo MB,

Ich hab's grade ebend in nem Dummy getestet 👍

Ohne Test in einem Dummy würde ich sowas gar nicht erst posten 😀. Jetzt muss es nur noch in deinem elektronischen Obskurian funktionieren.

so war!!! Das ist auch mein Prinzip 👍. Aber leider sieht die Realität bei mir n bisschen anders aus, wie man trefflich hier im Forum sehen kann 🤦. Ich nenne da Hektik. Schande über mich…!!!

Man sieht den Wald vor lauter Bäumen nicht 🤷.

Nach 39 Jahren an der Tastatur hegt man angesichts eines Baumes aber den Verdacht, dass der Wald nicht weit sein kann, und lauscht auf das Grunzen der Wildschweine 😉

🤣

lgmb

[Rolf B]

Hallo MB,

bei genauerer Betrachtung muss ich sagen, dass ich mit der dritten Regel schlichtweg Glück gehabt habe. Denn das hätte auch schiefgehen können - mein Test hatte zu wenig Kommentarblöcke.

Eine Regex hätte - ohne Gegenmaßnahmen - hier nämlich falsch funktioniert. Stichwort ist hier "greedy" vs "non-greedy".

Der Selektor setzt sich aus vier verbundenen Selektoren zusammen (V1 bis V4), die durch den ~ Kombinator zusammengefügt werden

.------V1-------.   .---------V2----------.   .---V3---.   .---------V4----------.
span.start:active ~ span:is(.comment, .end) ~ span.start ~ span:is(.comment, .end)

Wenn der Teilselektor V2 nämlich so viele .comment und .end Elemente matcht, wie er nur kann (greedy), und dann erst die Suche nach V3 beginnt, dann wäre ich 'reingefallen.

Tut er aber nicht, er macht mit V3 weiter, sobald er kann (non-greedy). Das habe ich jetzt mit einer längeren Liste von Kommentargruppen nachgetestet.

Puh.

Rolf

[MB]

moin,

bei genauerer Betrachtung muss ich sagen, dass ich mit der dritten Regel schlichtweg Glück gehabt habe. Denn das hätte auch schiefgehen können - mein Test hatte zu wenig Kommentarblöcke. […]

Ich dachte auch das der erste ~ Selektor bis zum Ende des Parent-Elementes sucht, selektiert und dann der nächste ~ Selektor im Anschlussan den ersten ~ Selektor folgt. Deswegen hzabe ich ja hier nachgefragt.

lgmb