Das::columnCSSPseudoelement repräsentiert die einzelnen Spalten, die erzeugt werden, wenn ein Container so eingestellt ist, dass er seinen Inhalt in mehreren Spalten mithilfe desCSS-Mehrspaltenlayouts anzeigt. Das::column-Pseudoelement ermöglicht das Anwenden von Stilen, die das Layout dieser erzeugten Fragmente nicht beeinflussen.

Syntax

::column {  /* ... */}

Beschreibung

Wenn das CSS-Mehrspaltenlayout verwendet wird, um den Inhalt eines Containers in mehreren Spalten auszulegen (zum Beispiel mit dercolumn-count-Eigenschaft), werden::column-Pseudoelemente erzeugt, um jede einzelne Spalte zu enthalten.

Das::column-Pseudoelement akzeptiert nur Scroll-Snap-Eigenschaften, die auf Elemente innerhalb eines Scroll-Containers angewendet werden, einschließlichscroll-margin,scroll-snap-align undscroll-snap-stop.

Das::column-Pseudoelement kann ein::scroll-marker-Pseudoelement haben. Andere Pseudoelemente wie::before und::after werden auf::column nicht erzeugt. Wenn::column::scroll-marker angewendet wird, wird ein Marker für jede Spalte des ursprünglichenScroll-Containers erstellt, wobei die::scroll-marker-Pseudoelemente vom ursprünglichen Element des::column-Pseudoelements erben und nicht vom::column selbst.

Dies ist nützlich fürCSS-Karussells —::column kann verwendet werden, um::scroll-marker-Pseudoelemente für jede Spalte zu erzeugen und diese alsSnap-Ziele mithilfe vonCSS-Scroll-Snap festzulegen.

Während die auf::column anwendbaren Stile sehr begrenzt sind, könnten sie in der Zukunft erweitert werden. Alle zukünftigen unterstützten Eigenschaften und Werte werden auf solche beschränkt sein, die das Layout nicht beeinflussen.

Beispiele

Scrollendes Spaltenlayout

Dieses Demo erstellt einen responsiven Container, der jede „Seite“ des Inhalts an Ort und Stelle einrastet. Es verwendet diecolumns-Eigenschaft und das::column-Pseudoelement, um Inhaltsspalten zu erstellen, die die volle Breite ihres übergeordnetenScroll-Containers einnehmen und horizontal gescrollt werden können. Jede Spalte enthält ein oder mehrere Listenelemente, deren Anzahl je nach der Breite des Ansichtsfensters variiert.

HTML

Das HTML besteht aus einerungeordneten Liste, wobei jedesListenelement einige Beispielinhalte enthält:

<ul>...  <li>    <h2>Item 1</h2>  </li>...</ul>

<ul>  <li>    <h2>Item 1</h2>  </li>  <li>    <h2>Item 2</h2>  </li>  <li>    <h2>Item 3</h2>  </li>  <li>    <h2>Item 4</h2>  </li>  <li>    <h2>Item 5</h2>  </li>  <li>    <h2>Item 6</h2>  </li>  <li>    <h2>Item 7</h2>  </li>  <li>    <h2>Item 8</h2>  </li>  <li>    <h2>Item 9</h2>  </li>  <li>    <h2>Item 10</h2>  </li>  <li>    <h2>Item 11</h2>  </li>  <li>    <h2>Item 12</h2>  </li>  <li>    <h2>Item 13</h2>  </li>  <li>    <h2>Item 14</h2>  </li>  <li>    <h2>Item 15</h2>  </li></ul>

CSS

Der Liste wird eine festeheight und einewidth von100vw gegeben, um sicherzustellen, dass sie die volle Breite des Ansichtsfensters einnimmt. Einoverflow-x-Wert vonscroll wird dann eingestellt, sodass der Inhalt horizontal scrollt, undCSS-Scroll-Snap wird verwendet, um zu jedem Element oder „Seite“ zu snappen — einscroll-snap-type-Wert vonx mandatory wird verwendet, um die Liste in einenScroll-Snap-Container zu verwandeln. Schließlich wird eincolumns-Wert von1 gesetzt, um die Listeninhalte als eine einzelne Spalte anzuzeigen. Eintext-align-Wert voncenter wird ebenfalls angewendet, um den Inhalt zentriert auszurichten.

* {  box-sizing: border-box;}body {  margin: 0;  font-family: "Helvetica", "Arial", sans-serif;}

ul {  width: 100vw;  height: 300px;  padding: 10px;  overflow-x: scroll;  scroll-snap-type: x mandatory;  columns: 1;  text-align: center;}

Die Listenelemente werden dann gestylt:

• Eindisplay-Wert voninline-block wird eingestellt, um die Listenelemente nebeneinander zu positionieren und die Liste horizontal scrollbar zu machen.
• Eine festewidth undheight wird darauf eingestellt.
• Eintext-align-Wert vonleft wird darauf eingestellt, um dastext-align: center, das auf den übergeordneten Container eingestellt ist, zu überschreiben, sodass der Inhalt der Elemente linksbündig ausgerichtet wird.
• Jedes gerade nummerierte Listenelement erhält eine andere Hintergrundfarbe über:nth-child(), sodass der Scrolling-Effekt leichter zu erkennen ist.

li {  list-style-type: none;  display: inline-block;  height: 100%;  width: 200px;  text-align: left;  background-color: #eeeeee;  outline: 1px solid #dddddd;  padding: 0 20px;  margin: 0 10px;}li:nth-child(even) {  background-color: cyan;}

Diescroll-snap-align-Eigenschaft wird auf die::column-Pseudoelemente gesetzt — die die durch diecolumns-Eigenschaft erzeugten Inhaltsspalten darstellen —, sodass beim Scrollen eine Spalte zentriert in den Scroll-Container eingeschnappt wird.

ul::column {  scroll-snap-align: center;}

Ergebnis

Auf Spalten basierendes Karussell mit Scroll-Markern

Aufbauend auf dem vorherigen Beispiel erstellen wir Scroll-Marker, um die direkte Navigation zu verschiedenen Spalten zu ermöglichen, indem wir einescroll-marker-group auf den Container und eine::scroll-marker auf jedes::column-Pseudoelement anwenden. Das HTML bleibt unverändert.

CSS

Wir erstellen eine Scroll-Marker-Gruppe mit derscroll-marker-group-Eigenschaft, indem wir die Gruppe nach dem gesamten Inhalt platzieren:

ul {  scroll-marker-group: after;}

Dann wenden wir Stile auf das::scroll-marker-group-Pseudoelement an, um die Scroll-Marker in der Mitte der Reihe mit einem0.4em Abstand dazwischen zu layouten:

::scroll-marker-group {  display: flex;  gap: 0.4em;  place-content: center;}

Schließlich verwenden wir das::scroll-marker-Pseudoelement, um einen runden, transparenten Marker für jedes Listenelement mit einem schwarzen Rand zu erstellen, und stylen den Marker des aktuell gescrollten Elements anders als die anderen, wobei wir den Marker mit der:target-current-Pseudoklasse ansprechen:

ul::column::scroll-marker {  content: "";  width: 16px;  height: 16px;  background-color: transparent;  border: 2px solid black;  border-radius: 10px;}ul::column::scroll-marker:target-current {  background-color: black;}

Ergebnis

Versuchen Sie, die Scroll-Marker zu drücken, um direkt zu jeder Seite zu springen. Beachten Sie, wie der aktuelle Marker hervorgehoben wird, damit Sie sehen können, wo Sie sich in der Paginierung befinden. Versuchen Sie auch, zur Scroll-Marker-Gruppe zu tabben, und verwenden Sie dann die Cursortasten, um durch jede Seite zu navigieren.

SieheErstellen von CSS-Karussells für weitere Karussellbeispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• columns
• ::scroll-marker
• ::scroll-marker-group
• :target-current
• Erstellen von CSS-Karussells
• CSS-Mehrspaltenlayout-Modul
• CSS-Overflow-Modul
• CSS-Karussell-Galerie über chrome.dev (2025)