nth-child nach id

[tobi85]

Hallo,

gibt es bei CSS folgenden Selektor.

Es soll zum Beispiel das 3 Element nach einer ID oder Klasse gewählt werden

<ul> 
<li></li> 
<li id='select'></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
</ul>

[Christian Kruse]

Hallo tobi85,

Es soll zum Beispiel das 3 Element nach einer ID oder Klasse gewählt werden

Das geht nur hässlich, mit sowas wie

#select + li + li + li {
  border:1px solid red;
}

Sowas wie nth-sibling gibt es nicht.

LG,
CK

[tobi85]

würde das dann auch rückwärts gehen - also zum Beispiel 3 Elemente davor?!?

[Matthias Apsel]

Hallo tobi85,

würde das dann auch rückwärts gehen - also zum Beispiel 3 Elemente davor?!?

Nein. Mit CSS nicht, das kann nicht rückwärts selektieren. Aber wenn du beschreibst, was du vorhast, kann man vielleicht eine andere Lösung vorschlagen.

Bis demnächst
Matthias

[tobi85]

Habe zum Beispiel 50 Seiten. Nun möchte ich nicht, dass alle 50 Seiten angezeigt werden, weil die Liste zu lang wäre. Wenn der User zum Beispiel auf Seite 25 ist, soll zum navigieren 3 Seiten davor und 3 Seiten danach angezeigt werden.

Mit PHP kann ich es natürlich machen, oder mit JAVASCRIPT. Hätte es aber gerne mit CSS umgesetzt.

[Rolf b]

Ich glaube, dass "select" als ID nicht richtig ist, sondern dass man das als class lösen sollte. Ggf. hast Du ja in mehreren Containern selektierbare Werte.

Und ansonsten wäre meine Meinung dazu diese:

Löst ein Seitenwechsel immer den Abruf einer kompletten neuen Seite aus?
-> mach es auf dem Server

Hast Du eine SPA die die Seiteninhalte beim Blättern per AJAX nachlädt?
-> mach es in Javascript (reiner JS Navigator) oder PHP (hole den geänderten Navigator vom Server)

Kannst Du auf unbestimmte Zeit warten?
-> Warte ab bis der :has() Selektor implementiert ist. Wenn sich der Vorschlag etabliert, wird folgendes möglich sein:

   nav li {
     display:none
   }
   /* ACHTUNG - :has() ist Working Draft und bisher von keinem Browser implementiert */
   nav li:has(+ .select, + li + .select, + li + li + .select), nav li.select, nav li.select + li, nav li.select + li + li, nav li.select + li + li + li {
      display:block; /* oder inline-block oder was du brauchst */
   }
   

Bist Du ein Fan von Knobelei und kryptischen Darstellungen?
-> Probiers in aktuellem CSS ;)

Rolf

[Gunnar Bittersmann]

@@tobi85

Mit PHP kann ich es natürlich machen, oder mit JAVASCRIPT.

Dann mach das so.

Hätte es aber gerne mit CSS umgesetzt.

Das hieße das Markup mit Dingen vollzumüllen, die gar nicht angezeigt werden sollen. Damit ist niemandem geholfen.

LLAP 🖖