473,385 Members | 1,357 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

get all elements to which a CSS selector applies?

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

Mar 18 '06 #1
8 1328
> "pe**********@gmail.com" <pe**********@gmail.com> wrote:
news:11**********************@i39g2000cwa.googlegr oups.com....

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[i];
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.*

Mar 18 '06 #2
BootNic wrote:
"pe**********@gmail.com" <pe**********@gmail.com> wrote:
news:11**********************@i39g2000cwa.google groups.com....

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[i];
y=x.parentNode.tagName.toLowerCase();
z=x.parentNode.parentNode.className;
if(y=='li'&&z=='easyMenu'){
x.style.color='#008000';
}
}
}

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.

--
Ian Collins.
Mar 19 '06 #3
> "Ian Collins" <ia******@hotmail.com> wrote:
news:11***************@drone2-svc-skyt.qsi.net.nz....

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[i];
y=x.parentNode.tagName.toLowerCase();
z=x.parentNode.parentNode.className;
if(y=='li'&&z=='easyMenu'){
x.style.color='#008000';
}
}
}

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[i];
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*

Mar 19 '06 #4
pe**********@gmail.com wrote:
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/>

Mar 19 '06 #5
> You're looking for cssQuery...
<url:http://dean.edwards.name/my/cssQuery/>


:D

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

Mar 19 '06 #6
BootNic wrote:
"Ian Collins" <ia******@hotmail.com> wrote:
news:11***************@drone2-svc-skyt.qsi.net.nz....

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[i];
y=x.parentNode.tagName.toLowerCase();
z=x.parentNode.parentNode.className;
if(y=='li'&&z=='easyMenu'){
x.style.color='#008000';
}
}
}


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?

Inherited styles complicate matters somewhat.

--
Ian Collins.
Mar 19 '06 #7
pe**********@gmail.com wrote:
You're looking for cssQuery...
<url:http://dean.edwards.name/my/cssQuery/>

:D

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.

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

--
Ian Collins.
Mar 19 '06 #8
> 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

Mar 19 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Don Bate | last post by:
I'm having a problem with the "unique" feature of XML Schema. I'm relatively new to using this feature so it may be that I'm misunderstanding something. Let's assume that I have the following...
14
by: Florian Brucker | last post by:
Hi! Here's what it should look like: <style type="text/css"> span.h1 { border-style:solid; border-width:0px; border-color:#000000; border-bottom-width:2px;
4
by: Lachlan Hunt | last post by:
Hi, I was wondering if ::before and ::after pseudo-elements can apply to elements styled with the display: table-* properties. None of my tests worked in either Firefox or Opera, yet I could not...
2
by: Kae Verens | last post by:
Anyone know of a script which returns a list of elements matching a specified CSS selector? Kae
3
by: R.Schuetze | last post by:
Hallo, I'm working on an XSD schema for an 3D Point. The XML struktur of the point is the following: <Point name="6" target="Retro" type="TP" unit="m"> <param name="X" value="0.000"/> <param...
5
by: tthunder | last post by:
Hi @all, I am trying to set a key constraint in my XML Schema, which concers all elements containing an attribute named "ID" My XML example: <root> <x ID='1'> <y ID='2'>
2
by: luke.crouch | last post by:
My server-side php script is generating an xml response with the following structure: <thread class='Columns'> <Id class='Column dataDetail'>12345</Id> <Command class='Column...
7
by: Adam Hartshorne | last post by:
Hi All, I was wondering if somebody could tell me if there is an efficient way to do the following. Say I have a list(or vector) A and a list B, I want to remove any elements in B, that are also...
18
by: Diogenes | last post by:
Hi All; I, like others, have been frustrated with designing forms that look and flow the same in both IE and Firefox. They simply did not scale the same. I have discovered, to my chagrin,...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.