CSS Selector problem

I have a problem to point out two objects having the same class.

If I use the CSS selector:

@FindBy(css = ".searchform .sprite.limitbox-trigger")

it points out both objects.

I need two different CSS selectors pointing out the objects separately.

Here is the code:

Object 1:

<input type="text" id="what" name="what" value="">
<a class="sprite limitbox-trigger  helper" href="#" data-text="Click to view extra options on how to limit your search"></a>

Object 2:

<input type="text" id="where" name="where" value="">
<a class="sprite limitbox-trigger  helper" href="#" data-text="Click to view extra options on how to limit your search"></a>


I understand I need to use the id="where" or name="where" but I don't get the combination with class to work...
Bear2Asked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Just use the adjacent sibling selector (+)

#what + .sprite.limitbox-trigger
#where + .sprite.limitbox-trigger

Open in new window

0
 
soupBoyCommented:
Your id's should be unique, but if that won't work, you could always find the first one by using :first-of-type...however I don't believe that will work in IE8 (if you have to support it).

.searchform .sprite.limitbox-trigger:first-of-type

Open in new window


You mention using the input attributes...which could get ugly but might work for you
input[id="someID"] + .searchform .sprite.limitbox-trigger

Open in new window

I only used the ID as it would be unique...but you could easy 'chain' the other parts of the selector....  [id="someID"][name="someName"] etc.


Let me know if I am way off base with this...


- Chris
0
All Courses

From novice to tech pro — start learning today.