CSS Tutorial and links for working with CSS selectors

Dave_Evers · November 21, 2022, 5:39pm

Hi folks,
I found the following invaluable resource on how to create and/or build CSS selectors and wanted share it with the forum. I hope others find it as valuable as I have.

Dave_Evers · November 21, 2022, 5:43pm

Other resources follow:

Dave_Evers · November 21, 2022, 5:46pm

Dave_Evers · November 21, 2022, 5:47pm

Dave_Evers · November 21, 2022, 5:48pm

vu.tran · November 22, 2022, 9:49am

Thank you so much @Dave_Evers for all the great tips!

Dave_Evers · July 5, 2023, 4:37pm

Example for using Chrome’s ‘Copy selector’ to find CSS selectors.

01 Using Chrome open: https://katalon-demo-cura.herokuapp.com
02 Click 'Make Appointment' button.
03 Login with John Doe/ThisIsNotAPassword.
04 Right-click on the 'Facility' dropdown.
05 Click 'Inspect'.
06 Right-click on the 'Facility' dropdown.
07 Click 'Inspect'.
08 Click the right caret symbol for <select id="combo_facility" name="facility" class="form-control">.
09 Click on one of the options.
10 Right-click > Copy > Copy selector.
11 Press "Control + F".
12 Paste the copied selector, e.g., #combo_facility > option:nth-child(1) into the search field.
13 Press <Enter> key, option 1 is selected.
14 Change #combo_facility > option:nth-child(2)
15 Press <Enter> key, option 2 is selected.
16 Change #combo_facility > option:nth-child(3)
17 Press <Enter> key, option 3 is selected.