2022.2

Table Of Contents

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.

OLConnectclassesandattributes

OL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beha-

viour.OLConnect-specificclassesandattributescanbeusedinselectors,aswillbeexplainedand

demonstratedbelow.

OL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.

Caution: 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.

Note: Tomakescriptsrunexclusivelyoncertainsections,itisadvisedtoputthemin

foldersandsettheexecutionscopeofthescriptsinafolderviathefolderproperties;see

"Executionscope"onpage815.

Example: Thefollowingruleappliesformattingto<h1>elementsinsectionsofwhichthename

startswith‘Letter’:

[section^='Letter'] h1 {

color: brown;

}

Page 826