CSS Selectors & Siteimprove Policy

Summary

Siteimprove Policy's CSS Selector rule matches CSS2, CSS3, and select jQuery extensions against a page's HTML code (not external CSS files) to flag pages containing specific elements, letting you target things like missing attributes, hidden headings, or unwanted meta tags without writing regular expressions.

Overview

Siteimprove Policy helps users find pages that contain specific HTML elements, or elements that are required to be structured a certain way. This can be done using regular expressions set up by Siteimprove's Support team, or in some cases with CSS selectors. Based on user cases put forward by Policy customers, Siteimprove introduced the CSS Selector rule in the Policy module. If the content you wish to highlight can be expressed as a CSS selector, the reference examples below will be of use to you.

CSS selectors are expressions that are matched against each page on the website. If the CSS selector matches one or more elements on a page, the Policy will list that page.

If you are not familiar with basic CSS selectors, there are plenty of online guides that explain the concepts, including The 30 CSS Selectors you Must Memorize, CSS Getting Started, and CSS Selector Reference. As well as standard CSS selectors, see the article on non-standard CSS selectors that can be used in Policy.

Siteimprove supports CSS2, CSS3, and some jQuery selector extensions. The full supported set is described at https://github.com/jamietre/CsQuery#features. Because Siteimprove is closely aligned to jQuery-supported selectors, an easy way of creating and testing CSS selectors is to try them directly in your browser's Developer Tools, as well as jQuery selectors if your site uses jQuery.

Note: The Policy module's CSS Selector rule looks at the page's HTML code, not external CSS files.

Reference: CSS selector examples

• Pages containing the meta tag og:title: meta[name="og:title"]
• External links that don't open in a new window or tab (matches links beginning with http or https, excluding those pointing to your own domain): a[href^="http"]:not([href*="yourdomain.com"]):not([target="_blank"])
• Instances of bold text (font-weight: bold): [style*="bold"]
• Links within the page body that lack a title attribute (ignoring mailtolinks): main a:not([title]):not([href^="mailto"])
  1. Note: your site's page body might not be placed in a <main> element, so the first part of this selector might need to be tailored to your site
• Meta tags named og:title whose content attribute contains the company name: meta[name="og:title"][content*="My Company"]
• Image elements with an explicit width attribute (verifies the width attribute exists but doesn't check its value): img[width]
• Image elements without an explicit width attribute: img:not([width])
• Images with no explicit width, nor a width in the style attribute: img:not([width], [style*="width:"])
• Hidden H1s (a jQuery extension that finds <h1> elements explicitly hidden, or contained in an element that is explicitly hidden): h1:hidden turn1search1
• Pages that have a form in the main content area:main form
  • Note: your site's page body might not be placed in a <main> element, so the first part of this selector might need to be tailored to your site
• <h1> headings that contain a specific word(a jQuery extension that looks at an element's content; case-sensitive by default): h1:contains("Company")
  • Add-i for case-insensitive matching: h1:contains-i("Company")

Be aware of the different attribute selectors available; check the documentation links in the Overview section above for details.