2021.1

Table Of Contents

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.

Connect-specific classes usually are invisible in the Designer. By opening the currently

selected section in your default web browser (click the Preview HTML toolbar button) and using

the browser's code or source inspector you can see most of the dynamically added classes.

Warning

Avoid using classes with the __ol prefix in your selectors. These dynamically added

class names may change in future releases of the software.

Section selector

The Designer writes the name of each section to the section attribute of the <html> element.

This attribute can be used in selectors.

Page 889