Javascript CSS selectors with all H tags

Question

Using a prototype JS library, I want to select all the child elements of links (tags A) regardless of whether their parent is: H1, H2, H3, H4 or H5 (etc.) using a simple CSS Selector rule (in unlike further JS, such as loop, etc.).

So, a simple but long way:

$('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a') 

I think I'm looking for a wild-card property, for example h *, which does not exist.

Perhaps the above example is the way to go, but I hope there is a simpler, shorter, and more efficient way to do this.

Tips appreciated.

Answer 1

According to Fabien Ménager's comment on the original question, there seems to be no simple CSS selector that I can use, other than what I already have.

 $('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a') 

While there are other options, if I want to be programmatic about this, or empty jQuery (this is not an option for me), I am specifically looking for CSS rules.

Thanks to everyone who tried to help.

Answer 2

Using jQuery:

 $(":header a") 

Answer 3

http://docs.jquery.com/Selectors/header says:

: header Matches all elements that are headers, such as h1, h2, h3, etc.

Adds background color and text to all headings on the page.

 $(":header").css({ background:'#CCC', color:'blue' }); 

Answer 4

got the answer from devs prototypes. these are the best and only solutions, at the moment at least:

 $$('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a') $('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a') 

However, the next Prototype release will let you choose a picker and the default is Sizzle . The :header pseudo-selector is actually part of Sizzle, so it will be available in future prototype versions (as long as you choose the hiss as your picker). I assume that it has not been included before, as it is not part of any specification.