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 ]