MB: Zusatzfrage: Wie mit ~ und Pseudo-Selektor-Kombation nur einen Teil selektieren?

Beitrag lesen

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.

--
Sprachstörung