Targeting Domino XPages Dojo Controls with CSS 3 Selectors

03/28/2011 12:08 PM by Chris Toohey

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:

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

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:

This XPage markup generates the following HTML markup:

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:

This won't work. Hell, even quickhighlighter.com [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:

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:

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.