Dictionary

CSS Selector

Element of the stylesheet in CSS (Cascading Style Sheets). CSS selector indicates the HTML element that we attribute to in declaration part of the code.

css_2

To find the CSS selector of the box outlined in violet click upon empty part of the website and press keyboard shortcut Ctrl+Shift+C, then hover mouse over the site to indicate the box and click it. Our indicated rectangular will be blue (content area color in CSS) and be framed with a green border (padding area color in CSS; in Firefox light violet).

css6
css6-2

When you click shortcut Ctrl+Shift+C your website has been split into two parts. DevTools are on the right side of the screen (in Firefox - at the bottom of the screen), and one paragraph of code has a darker background than the rest. You should right-click this part of code and choose Copy > Copy selector. It turns out that the CSS selector of our rectangular box is #ax-114.

Another way to open DevTools is to right-click on the element for which you are looking for a CSS selector and choose Inspect.

css4

To use a CSS selector in Wizlink® you have to:

    • open Settings window (from Menu bar) and in Project settings tab place a check mark in a box to allow control editing; this will reveal the third option (Edit CSS selector) when right-clicking on the control;
    • open properties box in Virtual GUI controls tab;
    • right-click on the control and choose Edit CSS selector; this will change normal characters into bold characters of the Path value in controls properties;
    • replace all bolded characters by previously discovered CSS selector.