Css2 Attribute Selectors with Regex

CSS2 Attribute Selectors with Regex

As for CSS 2.1, see http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Executive summary:

    Attribute selectors may match in four ways:

    [att]
    Match when the element sets the "att" attribute, whatever the value of the attribute.
    [att=val]
    Match when the element's "att" attribute value is exactly "val".
    [att~=val]
    Match when the element's "att" attribute value is a space-separated list of
    "words", one of which is exactly "val". If this selector is used, the words in the 
    value must not contain spaces (since they are separated by spaces).
    [att|=val]
    Match when the element's "att" attribute value is a hyphen-separated list of
    "words", beginning with "val". The match always starts at the beginning of the
    attribute value. This is primarily intended to allow language subcode matches
    (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

CSS3 also defines a list of selectors, but the compatibility varies hugely.

There's also a nifty test suite that that shows which selectors work in your browser.

As for your example,

a[href^=http]
{
    background: url(external-uri);
    padding-left: 12px;
}

should do the trick. Unfortunately, it is not supported by IE.

Regex to parse CSS selector

Thanks all very much for your suggestions and help. I tied it all together into the following two Regex Patterns:

This one parses the CSS selector string (e.g. div#myid.myclass[attr=1,fred=3]) http://www.rubular.com/r/2L0N5iWPEJ

cssSelector = re.compile(r'^(?P<type>[\*|\w|\-]+)?(?P<id>#[\w|\-]+)?(?P<classes>\.[\w|\-|\.]+)*(?P<data>\[.+\])*$')

>>> cssSelector.match("table#john.test.test2[hello]").groups()
('table', '#john', '.test.test2', '[hello]')
>>> cssSelector.match("table").groups()
('table', None, None, None)
>>> cssSelector.match("table#john").groups()
('table', '#john', None, None)
>>> cssSelector.match("table.test.test2[hello]").groups()
('table', None, '.test.test2', '[hello]')
>>> cssSelector.match("table#john.test.test2").groups()
('table', '#john', '.test.test2', None)
>>> cssSelector.match("*#john.test.test2[hello]").groups()
('*', '#john', '.test.test2', '[hello]')
>>> cssSelector.match("*").groups()
('*', None, None, None)

And this one does the attributes (e.g. [link,key~=value]) http://www.rubular.com/r/2L0N5iWPEJ:

attribSelector = re.compile(r'(?P<word>\w+)\s*(?P<operator>[^\w\,]{0,2})\s*(?P<value>\w+)?\s*[\,|\]]')

>>> a = attribSelector.findall("[link, ds9 != test, bsdfsdf]")
>>> for x in a: print x
('link', '', '')
('ds9', '!=', 'test')
('bsdfsdf', '', '')

A couple of things to note:
1) This parses attributes using comma delimitation (since I am not using strict CSS).
2) This requires patterns take the format: tag, id, classes, attributes

The first regex does tokens, so the whitespace and '>' separated parts of a selector string. This is because I wanted to use it to check against my own object graph :)

Thanks again!

Use Regex with selenium driver tag selectors

You can try using XPath contains:

List<WebElement> allElement = driver.FindElements(By.Xpath(".//<define root element here>[contains(@class, 'my-img-')]")

CSS difference between attribute selectors with tilde and star?

The asterisk attribute selector *= matches any substring occurrence. You can think of it as a string contains call.

$('div[id^="field_"][id$="_dd"]')

.card {
    border: solid 1px blue;
    padding-top: 20px;
}

.card .card-heading {
    border: solid 1px red;
    margin-top: -20px;
}

var frame = document.querySelector("[name^=tag_name_]");

([#.@]?[\w.:> ]+)[\s]{[\r\n]?([A-Za-z\- \r\n\t]+[:][\s]*[\w .\/()\-!]+;[\r\n]*(?:[A-Za-z\- \r\n\t]+[:][\s]*[\w .\/()\-!]+;[\r\n]*(?2)*)*)}

$('div[id^="field_"][id$="_dd"]')