CSS Styling

CSS Classes

For convenience, there is a column CSS class to reference columns. To reference a particular column, use the nth-of-type selector.

Name Element Types Description
column td Column of articles
new-article article, role=article Dynamically added element which was prepended, rather than appended, to existing set of elements.

Column Styling

Some simple styles can be applied to columns, but beware that any style that affects size will likely break the layout.
It is recommended to style the article elements directly.

.column:first-of-type { background-color: LightCoral; } .column:nth-of-type(2) { background-color: Coral; } .column:last-of-type { background-color: Moccasin; }
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7

Article Styling

Articles (whether defined as article nodes or using role="article" can also be referenced using the nth-of-type CSS selector.

.column article:first-of-type { background-color: LightCoral; } .column article:nth-of-type(2) { background-color: Coral; } .column article::last-of-type { background-color: Moccasin; }
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7

And of course, each article can be fully styled using CSS; including margin, padding, border, and :hover.
Styling even works when articles are more complex DOM elements, such as an img or another web component (like another ordered-columns).

Element 1
Element 2
1
2
3
4
5
6
7
Element 4
Element 6
Element 7