2021.2

Selectors in Connect
Selectors are patterns used to select one or more HTML elements. They were originally
developed to be able to define the layout of web pages without touching their content, through
Cascading Style Sheets (CSS). In Connect, since each section in a Connect template is in fact
an HTML file (see "Editing HTML" on page635), the very same selectors can be used in style
sheets (see "Styling templates with CSS files" on page747) and template scripts (see
"Personalizing content" on page789 and "Writing your own scripts" on page877). Using
selectors for scripting can increase the speed with which a template and data are merged; see
"Use an ID or class as selector" on page892.
Standard CSS selectors
Selectors are made up of one or more of the following components:
l An HTML element. Type the HTML tag without the angle brackets (e.g. p) to select all
elements of that type (pselects all paragraphs).
l A class. Type the class name, preceded by a dot, e.g.: .green, to select HTML elements
with that class.
l An ID. Type the ID, preceded by #, e.g.: #intro, to select an HTML element with that ID.
l An attribute of an HTML element. Type the attribute and, optionally, its value, between
square brackets, e.g.: [target], to select HTML elements with a matching attribute.
l A pseudo-class. For example, tr:nth-child(even) selects all even table rows.
These components can be combined in different ways. For example, p div selects all
paragraphs inside <div> elements, while p, div selects all paragraphs and all <div> elements.
A complete list of selectors and ways to combine them, and a tool that demonstrates their use
can be found at W3Schools: http://www.w3schools.com/cssref/css_selectors.asp.
A video about CSS and Script Selectors, can be found here: Connect with Evie 6 - CSS and
Script Selectors.
Connect classes and attributes
Connect itself sometimes adds a specific class or attribute to elements in a template. Capture
OnTheGo widgets, for example, have a role attribute that allows the COTG library to dictate
their behaviour. Connect classes and attributes can be used in selectors, as will be explained
and demonstrated below.
Page 898