CSS Combinator selectors

CSS combinators are used to select elements based on their relationships with other elements in the HTML structure.
CSS combinators allow you to construct more complex selectors by combining multiple simple selectors.

CSS combinators allow you to create more specific and targeted locators in Selenium.
By combining these selectors, you can navigate and locate elements based on their relationships with other elements in the HTML structure.

These locators are going one way , top to bottom.

There are four types of CSS combinators:

Descendant selector (space): Selects elements that are descendants of another element. it will pick Child, Grnad child

syntax= . parent attrubute
.container select

Child selector (>): Selects elements that are direct children of another element. Only the child witll be picked.

syntax= . parent attrubute
.container>select

Adjacent sibling selector (+): Selects the element immediately following another element. Just below the element so only 1 value is picked.

here if I use, select only Apple will be selected.

syntax= sibilitngLocatorRelatesTo+siblingAttribute
option[value='select']+option

General sibling selector (~): Selects elements that are siblings of another element. Multiple sibilings will be selected.

syntax= sibilitngLocatorRelatesTo~siblingAttribute
option[value='select']~option

Credits-

https://www.youtube.com/watch?v=vQvs1WSQwI0&list=PLacgMXFs7kl8E5xl-nu_7ZjHN0O4oiFcl&index=4&ab_channel=HYRTutorials

CSS Selectors Practice