get all elements to which a CSS selector applies?

petermichaux · Mar 18, 2006

Hi,

Is there any way to get all elements to which a CSS selector applies?

Something like (surely I'm dreaming)

elements = document.getAllElementsToWhichThisSelectorApplies(".easyMenu
li > a");

Oh how sweet this would be.

Thanks,
Peter

BootNic · Mar 18, 2006

[email protected] said:
Hi,

Is there any way to get all elements to which a CSS selector
applies?

[snip]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function turn(){
var elm,i,j,x,y,z;
elm=document.getElementsByTagName('a');
for (i=0, j=elm.length; i<j; i++) {
x=elm;
y=x.parentNode.tagName.toLowerCase();
z=x.parentNode.parentNode.className;
if(y=='li'&&z=='easyMenu'){
x.style.color='#008000';
}
}
}
</script>
<style type="text/css">
..easyMenu li>a{
color:#FF0000;
}
</style>
<title></title>
</head>
<body>
<button onclick="turn()">check</button>
<ol class="easyMenu">
<li><a href="#">yup</a> <span><a href="#">nope</a></span>
<a href="#">yup</a></li>
<li><span><a href="#">nope</a></span></li>
<li><a href="#">yup</a> <a href="#">yup</a></li>
</ol>
</body>
</html>

--
BootNic Saturday, March 18, 2006 5:46 PM

"No man's life, liberty, or property is safe while the legislature is
in session."
*Judge Gideon J. Tucker, 1866.*

BootNic · Mar 19, 2006

Ian Collins said:
BootNic wrote: [snip]

<script type="text/javascript">
function turn(){
var elm,i,j,x,y,z;
elm=document.getElementsByTagName('a');
for (i=0, j=elm.length; i<j; i++) {
x=elm;
y=x.parentNode.tagName.toLowerCase();
z=x.parentNode.parentNode.className;
if(y=='li'&&z=='easyMenu'){
x.style.color='#008000';
}
}
}

Click to expand...

That's only looking for specific elements with a single class, the
OP was looking for a means of finding all elements to which a CSS
style applies. This is a little more complex and one would have to
check computed (or currentStyle in IE) style values for all
elements.

An near as I can tell ".easyMenu li>a{}" seem to be a emements that
have a parent li element, of which the li parent has a class of easyMenu.

Well I suppose this did not allow for more then one class. A small
adjustment is in order to allow for more then one class.

Maybe set z=x.parentNode.parentNode.className.match(/\beasyMenu\b/)
and then set the next if statement to if(y=='li'&&z)

Is it more complex then this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function turn(){
var elm,i,j,x,y,z;
elm=document.getElementsByTagName('a');
for (i=0, j=elm.length; i<j; i++) {
x=elm;
y=x.parentNode.tagName.toLowerCase();
z=x.parentNode.parentNode.className.match(/\beasyMenu\b/);
if(y=='li'&&z){
x.style.color='#008000';
}
}
}
</script>
<style type="text/css">
..easyMenu li>a{
color:#FF0000;
}
..easyMenu2 a{
background-color:#5F9EA0;
}
..easyMenu3 a{
font-size:1.5em;
}
</style>
<title></title>
</head>
<body>
<button onclick="turn()">check</button>
<ol class="easyMenu3 easyMenu easyMenu2">
<li><a href="#">yup</a> <span><a href="#">nope</a></span>
<a href="#">yup</a></li>
<li><span><a href="#">nope</a></span></li>
<li><a href="#">yup</a> <a href="#">yup</a></li>
</ol>
</body>
</html>

--
BootNic Saturday, March 18, 2006 10:54 PM

A person without a sense of humor is like a wagon without springs,
jolted by every pebble in the road.
*Henry Ward Beecher*

Jambalaya · Mar 19, 2006

Hi,

Is there any way to get all elements to which a CSS selector applies?

Something like (surely I'm dreaming)

elements = document.getAllElementsToWhichThisSelectorApplies(".easyMenu
li > a");

Oh how sweet this would be.

You're looking for cssQuery...
<url:http://dean.edwards.name/my/cssQuery/>

petermichaux · Mar 19, 2006

You're looking for cssQuery...

<url:http://dean.edwards.name/my/cssQuery/>

Yes that is exactly what I was looking for. Not only does it exist but
it worked right away as advertised. Sometimes the internet is a
wonderful place. I will be emailing the author with thanks.

Thank you for the link!

Peter

petermichaux · Mar 19, 2006

Good stuff indeed and just as complex as I'd expected! Not an operation
you want to do too often.

But so simple to use and it does not seem slow at all which is good
news.

Peter

How to discover a CSS Selector name?	8	Sep 12, 2023
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions	0	Oct 27, 2023
Site Migration Ruined all my CSS??	8	Aug 1, 2023
A simple CSS query selector	17	Aug 15, 2011
Is there a way to get a single mode using all the points within a 2D array?	2	Oct 17, 2022
Mandatory Elements To Conduct JavaScript Form Manipulation	7	Aug 22, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Can't decide which language to get back into programming with	1	Mar 28, 2023

get all elements to which a CSS selector applies?

petermichaux

BootNic

BootNic

Jambalaya

petermichaux

petermichaux

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads