CODEWITHSUNDEEP
htmlcss
TestRaptor
TestRaptor

Reputation: 1315

How to find a unique identifier using CSS for a class

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.

Upvotes: 0

Views: 714

Answers (3)

Ashish Kumar
Ashish Kumar

Reputation: 3039

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.

Upvotes: -1

enguerranws
enguerranws

Reputation: 8233

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.

Upvotes: 3

zsaat14
zsaat14

Reputation: 1118

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.

Upvotes: -1

Related Questions