CSS Selector - Sub-string

It allows matching a partial string to locate a particular web element.

There are three mechanisms in which matching of a string can be done using a CSS Selector.

We will look at each mechanism in detail with an example.

1. Match a Prefix

It allows us to access a particular string using a matching prefix.
Syntax : css=<HTML tag><[attribute^=prefix of the string]>
^ - Symbolic notation to match a string using prefix.
Prefix of the string - The string based on which match operation is performed.
For example, we will define the CSS Selector for the "Password" text box of Test and Quiz login page as: css=input#password[name^='pass']
Click on the "Find target in page" button to check whether the defined CSS Selector locates the desired element or not.

It allows us to access a particular string using a matching suffix.
Syntax: css=<HTML tag><[attribute$=suffix of the string]>
$ - Symbolic notation to match a string using suffix.
Suffix of the string - The string based on which match operation is performed.
For example, we will define the CSS Selector for the "Password" text box of Test and Quiz login page as: css=input#password[name$='ord']
Click on the "Find target in page" button to check whether the defined CSS Selector locates the desired element or not.

It allows us to access a particular string using a matching sub string.
Syntax: css=<HTML tag><[attribute*=sub string]>
* - Symbolic notation to match a string using sub string.
Sub string - The string based on which match operation is performed.
For example, we will define the CSS Selector for the "Password" text box of Test and Quiz login page as: css=input#password[name*='word']
Click on the "Find target in page" button to check whether the defined CSS Selector locates the desired element or not.