CSS selectors for GSA open source XHTML stylesheet

Recently we described how we built our GSA XSLT stylesheet to give us external CSS control over our search result page. A key element of that build was to rely on the open-source Google Code GSA XHTML Stylesheet, which is both way more web standards compliant and also makes it way easier to modify the XSLT so that you can generate search results without any embedded or inline styles.

The CSS styling or presentational characteristics of a search result page are, of course personal and particular to the designer who codes the CSS. But to make that process at least a touch easier, we’ve created a GSA open-source-CSS list of class and id selectors based on attributes generated in GSA search results markup when specifically using the open-source Google Code GSA XHTML Stylesheet. (This list of selectors will not work with the default GSA XSLT stylesheet.)

What we’ve done is carefully comb through the search result page markup, list all the CLASS and ID attributes in their order of page flow, annotated each with a description and then put them into a reusable CSS stylesheet that can be adapted for use new GSA frontends, as you will. Here’s an example:

Fairly straightforward stuff, but how many times over do you want to “view source” in your browser or invoke Firebug to recall the particular selector and attribute for, say, the definition list markup used in GSA search results? Seriously, unless you did it about 10 minutes ago, can you recall what the dd p.st span.rc a.f selector refers to on the search result page? We didn’t think so.

Here’s the full GSA open source CSS selector stylesheet.

Hope this helpful for those using the open source GSA stylesheet.