# CSS Tutorial and links for working with CSS selectors

**URL:** <https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822>\
**Category:** Web Testing\
**Tags:** css, locators, tips-tricks, katalon-studio\
**Created:** [November 21, 2022, 5:39pm UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822 "2022-11-21T17:39:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dave\_Evers](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dave_evers/32/435_2.png) [@Dave\_Evers](https://forum.katalon.com/u/Dave_Evers)\
**Post date:** [November 21, 2022, 5:39pm UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822/1 "2022-11-21T17:39:40Z")

</div>

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.

> **[How to use and create CSS Selectors in Selenium with examples?](https://www.toolsqa.com/selenium-webdriver/css-selectors-in-selenium/)**
>
> How To Use CSS Selector For Identifying & Locating Web Elements For Selenium Scripts? How to combine multiple CSS Selectors?

---

<div class="post-metadata">

**Author:** ![Dave\_Evers](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dave_evers/32/435_2.png) [@Dave\_Evers](https://forum.katalon.com/u/Dave_Evers)\
**Post date:** [November 21, 2022, 5:43pm UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822/2 "2022-11-21T17:43:41Z")

</div>

Other resources follow:

> **[CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![Dave\_Evers](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dave_evers/32/435_2.png) [@Dave\_Evers](https://forum.katalon.com/u/Dave_Evers)\
**Post date:** [November 21, 2022, 5:46pm UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822/3 "2022-11-21T17:46:11Z")

</div>

> <https://stackoverflow.com/questions/2554839/select-element-based-on-multiple-classes>

---

<div class="post-metadata">

**Author:** ![Dave\_Evers](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dave_evers/32/435_2.png) [@Dave\_Evers](https://forum.katalon.com/u/Dave_Evers)\
**Post date:** [November 21, 2022, 5:47pm UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822/4 "2022-11-21T17:47:55Z")

</div>

> **[Multiple Class / ID and Class Selectors | CSS-Tricks](https://css-tricks.com/multiple-class-id-selectors/)**
>
> Can you spot the difference between these two selectors?

---

<div class="post-metadata">

**Author:** ![Dave\_Evers](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dave_evers/32/435_2.png) [@Dave\_Evers](https://forum.katalon.com/u/Dave_Evers)\
**Post date:** [November 21, 2022, 5:48pm UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822/5 "2022-11-21T17:48:57Z")

</div>

> <https://stackoverflow.com/questions/7517429/css-selector-a-or-b-and-c>

---

<div class="post-metadata">

**Author:** ![vu.tran](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/vu.tran/32/20584_2.png) [@vu.tran](https://forum.katalon.com/u/vu.tran)\
**Post date:** [November 22, 2022, 9:49am UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822/6 "2022-11-22T09:49:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dave\_Evers](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dave_evers/32/435_2.png) [@Dave\_Evers](https://forum.katalon.com/u/Dave_Evers)\
**Post date:** [July 5, 2023, 4:37pm UTC](https://forum.katalon.com/t/css-tutorial-and-links-for-working-with-css-selectors/80822/7 "2023-07-05T16:37:14Z")

</div>

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

```auto
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.

```

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/3/f/3fabdb765b548a15d857481383443c67e48ff334.png)