0

I have two labels

Element A

  <div class="knx-field-group">
     <label for="ctl00_cphMainContent_tbFirstName">
     <span class="knx-field">
        <input id="ctl00_cphMainContent_tbFirstName" class="knx-field-text" type="text" maxlength="50" name="ctl00$cphMainContent$tbFirstName">
     </span>
     <span class="knx-field-error">Required Field</span>
  </div>

Element B

  <div class="knx-field-group">
     <label for="ctl00_cphMainContent_tbLastName">
     <span class="knx-field">
         <input id="ctl00_cphMainContent_tbLastName" class="knx-field-text" type="text" maxlength="50" name="ctl00$cphMainContent$tbLastName">
     </span>
     <span class="knx-field-error">Required Field</span>
  </div>

How can I use CSS to find a unique identifier for each label? I am a CSS beginner, so this will probably be a simple solution. Currently I am trying span[class=knx-field-error"] but it selects both the labels.

My goal is to verify text of each of these elements using webdriver.

TestRaptor
  • 1,305
  • 8
  • 24
  • 42
  • 1
    Do you want to target `div` or the `label`? – Mr. Alien Jan 29 '14 at 16:22
  • Why are you talking about selecting labels but your CSS example refers to a span? – j08691 Jan 29 '14 at 16:22
  • Sorry, label was a bad choice of words to use for describing my HTML. @Mr. Alien - I want to be able to verify the text that is in `Required Field`. I just don't know how to use CSS to identify each element individually. The only difference I see in the HTML is the ` – TestRaptor Jan 29 '14 at 16:31

3 Answers3

3

You can try :

label[for=ctl00_cphMainContent_tbFirstName] ~ .knx-field-error {
  /* Styles for first example. */
}

label[for=ctl00_cphMainContent_tbLastName] ~ .knx-field-error {
  /* Styles for second example. */
}

Just learn some CSS advanced selectors like that : http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

And you could almost select all elements you want.

enguerranws
  • 8,087
  • 8
  • 49
  • 97
-1

Try this:

.knx-field-group:first-child .knx-field-error{
    // css here
}

.knx-field-group:nth-child(2) .knx-field-error{
    // another css here
}

you can also do :nth-child(even), :nth-child(odd) and lot more.

Ashish Kumar
  • 2,991
  • 3
  • 18
  • 27
  • Really, I think, you should read a bit more on css. see this may help you: http://jsfiddle.net/ashishanexpert/nAM6v/ – Ashish Kumar Jan 29 '14 at 16:27
  • 1
    @AshishKumar are you asking someone has a (could be two) gold-badge of CSS to read more on that? :) – Hashem Qolami Jan 29 '14 at 16:30
  • @HashemQolami, sorry for offenses, but when you see his comment, you would say same thing. – Ashish Kumar Jan 29 '14 at 16:31
  • also I dont care who is saying this, what matter is What is the statement. If something is wrong, that's wrong. – Ashish Kumar Jan 29 '14 at 16:33
  • @AshishKumar Cool, I thought you would make your answer precise if I tell you but I think you are smart enough to handle it yourself so //me out – Mr. Alien Jan 29 '14 at 16:35
  • @Alien, you said - nth has nothing to do with classes. It works fine. I have given the POC on it. Sorry, I was rude there. :) – Ashish Kumar Jan 29 '14 at 16:38
  • 1
    @AshishKumar http://stackoverflow.com/questions/5428676/nth-child-doesnt-respond-to-class – Mr. Alien Jan 29 '14 at 16:39
  • I dont know whats wrong there. Same thing is working fine with me. See this: http://jsfiddle.net/ashishanexpert/nAM6v/1/ – Ashish Kumar Jan 29 '14 at 16:43
  • 1
    @AshishKumar But it doesn't relate to them problem which Alien was describing, if an form returns with an Invalid Address or Bad name input, how does the programmer get the relevant field with odd & even? – MackieeE Jan 29 '14 at 16:57
  • @AshishKumar See, I was telling you about this yesterday http://jsfiddle.net/kRYfq/ also, you shouldn't use odd even as if the DOM gets dynamic, OP will get unexpected formatting – Mr. Alien Jan 30 '14 at 06:44
-1

First, span[class='knx-field-error'] will select all spans with a class of knx-field-error. Since you have two spans with a class of knx-field-error, CSS will select both. You will need to add a unique id to each span if you want to select them individually. Then, you can just select either span by using this CSS selector: #idname.

zsaat14
  • 1,110
  • 2
  • 10
  • 20
  • The question is "How can I select a particular element using its class ?", your answer : give him an ID. Perfectly valid answer ? I don't think so :) – enguerranws Feb 10 '14 at 16:19