Dynamic Web Development with Seaside

8.2.4Reference or ID Selector

A reference or ID is the name of a particular XHTML element on the page. Thus, the given style will affect only the element with the unique ID error (if defined). The ID selector is indicated by prefixing the ID with a # character:

#error { background-color: red; }

To create a tag with the given ID use the following Seaside code:

html div
id: 'error';
with: 'Some error message'

The generated XHTML code looks like this:

<div id="error">Some error message</div>

There are a couple of issues to be aware of when using IDs in your XHTML. IDs have to be unique on a XHTML page. If you use the same ID multiple times, some web browsers may not render your page as you expect, or may even refuse to render it at all. Furthermore some Javascript libraries dynamically apply their own IDs to identify page elements and these may override your carefully chosen IDs, causing your styling to fail in mysterious ways. See Part V on Javascript programming.

So, to avoid invalid XHTML and conflicts with JavaScript code, do not use IDs for styling. Exclusively use CSS classes for styling, even if the particular style is used only once.

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.