CSS Selector

 CSS Selector:

1) id Attribute: ( # )

XPath: //div[@id='fname']

CSS    : div#fname

 

2) class Attribute: ( . )

XPath: //div[@class='name']      (or) //*[@class='name']

CSS    : div.name      (or) .name

3) Attribute:

xpath: //tagName[@Attribute='value']      (or) //*[@Attribute='value']

CSS    : tagName[Attibute='value']      (or) [Attribute='value']

4) Sub-String:

Sub-String are of 3 types:

    Matching a prefix(starts-with):  tagName[Attribute ^= 'prefix']

    Matching a suffix(ends-with):  tagName[Attribute $= 'suffix']

    Matching a substring(contains): tagName[Attribute *='partialValue']

5) nth-of-type(index):

XPath: //*[@arial='123'][2]

CSS    : [arial='123'] : nth-of-type(2)

6) Direct Child(following-sibling):(>)

XPath: //div//following-sibling :: a

CSS    : div > a

7) Child/Sub-Childs:(<SPACE>)

XPath: //div//child :: a

CSS    : div a

8)AND:

XPath: //*[@Attribute1='value' and @Attribute2='value']

CSS    : [Attribute1='value'][Attribute2='value']

9) Next-Sibling:( + )

CSS    : div#123 + div

-Next Page: Handling Tool Tip Text