https://www.w3schools.com/cssref/css_selectors.php ## Basisselectoren | Selector | Doel | Voorbeeld | | -------- | ---------------------- | ------------------- | | `*` | Elk element | `*` | | `tag` | Specifiek HTML-element | `input`, `div`, `a` | | `.class` | Element met class | `.btn-primary` | | `#id` | Element met ID | `#zipcode` | ## Attribuutselectors | Selector | Betekenis | Voorbeeld | |----------------------|---------------------------------------------|-----------------------------| | `[attr]` | Heeft attribuut | `[disabled]` | | `[attr="value"]` | Exacte waarde | `[type="text"]` | | `[attr^="value"]` | **Begint met** | `[class^="btn-"]` | | `[attr$="value"]` | **Eindigt op** | `[class$="ng-invalid"]` | | `[attr*="value"]` | **Bevat waarde (contains)** | `[class*="warning"]` | ## Combinaties | Selector | Betekenis | Voorbeeld | |-----------------------|-------------------------------------------|------------------------------| | `tag.class` | Tag + class | `button.primary` | | `tag#id` | Tag + id | `input#zipcode` | | `[attr][attr2]` | Meerdere attributen | `[type="text"][required]` | ## Hiërarchieën | Selector | Betekenis | Voorbeeld | | -------- | ----------------------------- | --------------- | | `A B` | `B` binnenin `A` (descendant) | `div p` | | `A > B` | `B` is direct kind van `A` | `ul > li` | | `A + B` | `B` is direct ná `A` | `label + input` | | `A ~ B` | `B` ná `A` (zelfde parent) | `h2 ~ p` | ## Pseudo-klassen | Selector | Doel | Voorbeeld | |--------------------|-------------------------------------------|--------------------------| | `:first-child` | Eerste kind | `li:first-child` | | `:last-child` | Laatste kind | `li:last-child` | | `:nth-child(n)` | N-de kind | `tr:nth-child(2)` | | `:nth-of-type(n)` | N-de van dat type | `p:nth-of-type(2)` | | `:checked` | Aangevinkt (checkbox/radio) | `input:checked` | | `:disabled` | Uitgeschakeld | `input:disabled` | | `:focus` | In focus | `input:focus` | # Bijzondere gevallen ## Meerdere elementen tegelijk selecteren (OR) Je kunt meerdere selectors combineren met een **komma ,** om elementen te selecteren die **aan één van de voorwaarden voldoen** (logische **OF**) | selector | Doel | | ------------------------------ | ---------------------------------------- | | `cookiebar, cookie` | selecteert <cookiebar> of <cookie> | | `#id1, #id2` | selecteert element met id 'id1' of 'id2' | | `div[attr="x"], div[attr="y"]` | selecteert divs met attribuut 'x' of 'y' | # 📚 Bronnen - [MDN Web Docs – CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors) - [Playwright Docs – Selectors](https://playwright.dev/docs/selectors) - [W3Schools – CSS Selectors Reference](https://www.w3schools.com/cssref/css_selectors.asp) # Playwright specifiek In het kader van: [[Browser Library]] In Robot Framework worden regels die beginnen met `#` standaard als comment geïnterpreteerd. Dus als je in een variabele een CSS-selector met een ID wilt gebruiken, moet je `#` escapen met een backslash `\`. Bijvoorbeeld: `\#id`