Your Development & Design Resource

Targeting Domino XPages Dojo Controls with CSS 3 Selectors

Domino XPages Dojo Controls with CSS 3 Selectors

The biggest frustration I had with XPages when I first got started was the inability to employ the Element ID attribute-based styling I had been using for years in CSS. To explain, here's an example of Element ID attribute-based styling:

<div id="maincontainer">
    <div id="header">
        <h1>Hello World!</h1>
    <div id="body">
        <h1>Content Main Header</h1>
        <p>Some content here...</p>
    <div id="footer">
        <p>Some disclaimer here...</p>

Styling the above markup in CSS could be as simple as this:

h1 {
    color: red;
div#header {
    background-color: #000;

div#header h1 {
    color: #fff;

In the above example, the all H1 Elements would be red, but any H1 Element within the DIV Element [whose ID was header] would be white font on a black background.

The XPage Core Controls do not give you a simple way to control the Element ID, and while you can easily employ regular HTML markup in an XPage [ie., just hand-code the markup for the DIV Elements and add any ID you wish], there are times when you need access to an individual rendered HTML Element!

You can certainly use CSJS to manipulate Core Controls based on their generated/rendered HTML Element ID... but due to the syntax of most generated IDs, that just won't work in CSS.

For example, let's take a look at a very basic XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="">

            <xp:label value="Label" id="label1"></xp:label>
            <xp:inputText id="inputText1"></xp:inputText><xp:br></xp:br>
            <xp:text escape="true" id="computedField1"></xp:text>


This XPage markup generates the following HTML markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> ;
<html lang="en">
<script type="text/javascript" src="/domjs/dojo-1.4.3/dojo/dojo.js" djConfig="locale: 'en-us'"></script>
<script type="text/javascript" src="/domjs/dojo-1.4.3/ibm/xsp/widget/layout/xspClientDojo.js" ></script>
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xsp.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspSF.css">
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/demo/demo.nsf/dojo_targets.xsp" class="xspForm" enctype="multipart/form-data">
<span id="view:_id1:label1" class="xspTextLabel">Label</span><input type="text" id="view:_id1:inputText1" name="view:_id1:inputText1" class="xspInputFieldEditBox"><br>
<span id="view:_id1:computedField1" class="xspTextComputedField"></span>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!cta6l6e753!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>

If I wanted to style all xspLabel SPAN Elements and additionally style an individual xspLabel (let's say, to highlight an important field), I would try to use the following CSS:

span.xspTextLabel {
    font-weight: normal;
    color: #333;
span#view:_id1:label1 {
    font-weight: bold;

This won't work. Hell, even [which I use to generate/style my code snippets] picks up on the fact that the syntax is bad.

Well, not bad... but it just won't work for our purposes.

See, a colon is used in CSS to denote a pseudoclass, and if you're used CSS in the past, you've used them before. They're most often [and originally] used to define the current state of an A Element:

a {
    font-weight: normal;
    color: blue;
    text-decoration: underline;
a:hover {
    font-weight: bold;
    color: blue;
    text-decoration: none;
a:visited {
    font-weight: normal;
    color: blue;
    text-decoration: underline;

This rather simple example will style any link [A Element] on the page using the following logic:

A link will look like a link. If you mouse-over on the link, it'll bold the text and remove the underline from the link. If you've already been there, it'll still look like a link [vs. turning purple which is default browser behavior].

The problem with the Dojo-friendly XPage Core Controls is -- as previous in the above example -- the CSS is designed to interpret the colon as the state of the HTML Element... and thus it would try declaring that the style would be applied to the view Element's _id1 state [as I'm pretty sure the second colon would just screw it up even further...].

That obviously won't work at all...

Thankfully there's an answer to be found in CSS 3!

CSS 3 has extended the use of Selectors for a given HTML Element. And with it, it's given you some really slick capabilities previously reserved for JavaScript manipulation of rendered content or server-driven content.

For example, with the nth-child Selector, you can easily stripe/color alternate rows in a rendered View/DataTable, completely in CSS.

The Selector we'll want to focus on however for this article is the Attribute Selectors.

This allows you to key your CSS style rule off of any Element attribute... and using the syntax will allow us to target the Dojo-friendly IDs.

Styling our xspLabel Controls are now as simple as this:

span.xspTextLabel {
    font-weight: normal;
    color: #333;
span[id="view:_id1:label1"] {
    font-weight: bold;

CSS 3 Selectors are amazingly extendible, and allow you to apply styling to given Elements without the need to control every attribute (such as ID, Class, etc.). And I'm shocked to report that browser support is actually fairly decent for the Element[Attribute="Value"] syntax. Chrome, Firefox, Safari, and all other good browsers of course support CSS 3 Selectors, but I was surprised to find out that even Internet Explorer 7 supports it as well!

If you're running IE6... well, shouldn't you be worrying yourself with things like disabling JavaScript and using ActiveX Controls to launch the Windows Calculator instead of reading an article like this?! ;-)

I'll put together a few examples this week that showcase the capabilities of CSS 3 Selectors and the Dojo-friendly XPage Core Controls, so stay tuned for a few live demos showing off exactly what can be done using CSS 3 Selectors.

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.

More from is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.