Dynamic Web Development with Seaside

8.2.2Class Selector

The class selector is by far the most often used CSS selector. It starts with a period and usually defines a visual property that can be added to XHTML tags. The following CSS fragment defines the center and the highlight classes.

.center { text-align: center; }
.highlight { color: yellow; }

To use class selectors, simply set the WAGenericTag>>class: attribute of the tag you want to change. Here we associate the class selector .center to a given div element and .highlight to a given paragraph.

html div
class: 'center';
with: 'Seaside is cool'.
html paragraph
class: 'highlight';
with: 'Highlighted text'

The generated XHTML code looks like this:

<div class="center">Seaside is cool</div>
<p class="highlight">Highlighted text</p>

Multiple classes can be added to a single XHTML tag. So the following code will display a single text that is centered and highlighted:

html div
class: 'center';
class: 'highlight';
with: 'Centered and Highlighted'

The generated XHTML code looks like this:

<div class="center highlight">Centered and Highlighted</div>

Often CSS classes are used to conditionally highlight certain elements of a page depending on the state of the application. Seaside provides the convenience method WAGenericTag>>class:if: to make this as concise as possible. The following code snippet creates ten div tags and adds the CSS class even only if the condition index even evaluates to true. This is shorter than to manually build an ifTrue:ifFalse: construct.

1 to: 10 do: [ :index |
html div
class: 'even' if: index even;
with: index ]

Copyright © 21 April 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.