CODEWITHSUNDEEP
cssseleniumcss-selectors
jesintha roselin
jesintha roselin

Reputation: 171

Match first and last part of an element ID with css

My Html code is FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker

The numbers in between "FirstStep_customeDates" and "_Value_timepicker" will change dynamically.

The requirement is i should match the text that is prefix and suffix to the number

css=a[id^='FirstStep_customeDates' and id$='_Value_timepicker']

Upvotes: 0

Views: 69

Answers (2)

Julio Feferman
Julio Feferman

Reputation: 2676

Please reference https://www.w3.org/TR/css3-selectors/

E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"

E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar"

Here is an example:

div[id$="Value_timepicker"] {
  color:red
}

div[id^="FirstStep_CustomDates"] {
  color:blue;
}
<div id="FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker">one div</div>

Upvotes: 0

sol
sol

Reputation: 22949

You can combine those requirements like this:

a[id^='FirstStep_CustomDates'][id$='_Value_timepicker'] {
  color: red;
}
<a href="" id="FirstStep_CustomDates_e1baeca1-5e06-43f2-96fc-5fd3f262c5fd__Value_timepicker">I should be red</a>
<br>
<a href="" id="FirstStep_CustomDates_e1baeca1-5e06-43f2-9dssdffssdf6fc-5fd3f262c5fd__Value_timepicker">I should be red</a>
<br>
<a href="" id="test">I should not be red</a>

Upvotes: 4

Related Questions