How to extract attribute values using css selectors?

Question

I want to select the values of attributes of an element. For e.g if I have an input element

<input type="text" name=myInput value="100">

I can locate it using input[name='myInput'], but how do I get the value of it using a css selector?

BTW, I am trying to do this in Selenium using css selectors

Answer 1

You might want to explain what you're trying to do with the value. For instance, I have the following CSS to display the text of the links in the '#content' element in my print style sheet:

#content a:link:after, #content  a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}

#content a[href^="/"]:after {
    content: " (http://example.com" attr(href) ") ";
}

Answer 2

Your favorite JavaScript library should have some way to do this:

jQuery

$("input[name=myname]").val()

Prototype's method for CSS seloctors is $$() iirc.

For this example you could also use the native document.getElementsByName() method aswell.

Answer 3

If in Perl using WWW::Selenium then it's simply:

my $val = $selenium->get_value("css=input[name='myInput']");

If using another language then the Selenium library should support a get_value function/method.

Answer 4

Here is some detailed info about CSS selectors