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 css_2](http://docs-1-4.wizlink.eu/wp-content/uploads/2021/07/css_2.jpg)
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](http://docs-1-4.wizlink.eu/wp-content/uploads/2021/06/css6.jpg)
![css6-2 css6-2](http://docs-1-4.wizlink.eu/wp-content/uploads/2021/08/css6-2.jpg)
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 Element.
![css4 css4](http://docs-1-4.wizlink.eu/wp-content/uploads/2021/07/css4.jpg)
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.