473,569 Members | 2,761 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Changing CSS 2.1 descendant selectors

If I have an external stylesheet that is @imported into my page and it
has an element that looks like this:

* html td {
font-style: italic;
}

how can I use javascript to change the font style to 'normal'?

Andrew Poulos
Jul 23 '05 #1
5 1962


Andrew Poulos wrote:
If I have an external stylesheet that is @imported into my page and it
has an element that looks like this:

* html td {
Pretty odd selector, * html needs an element as the ancestor of <html>
which should never be the case in a HTML document. Is that a CSS hack
for a particular browser doing goofy stuff which the selector?
font-style: italic;
}

how can I use javascript to change the font style to 'normal'?


IE has its own object model to access stylesheets, see
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/collections/stylesheets.asp >
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/collections/imports.asp>

Mozilla implements (parts of) the W3C DOM Level 2 for CSS stylesheets as
documented here:
<http://www.w3.org/TR/DOM-Level-2-Style/>
<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.htm l#StyleSheets-StyleSheet-DocumentStyle>
<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.htm l#StyleSheets-StyleSheet>
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet>
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSImportRule>
So with Mozilla you can walk document.styleS heets (for the <link> and
<style> embedded sheets), in document.styleS heets[index] you can walk
the cssRules collection and need to find an import rule and then that
has a styleSheet property which again has a cssRules collection where
you need to look for the rule with the selectorText.
I am not sure whether I have ever tried to script a rule in an imported
sheet so I can't currently say without testing whether Mozilla makes
imported stylesheets available.

I know that Opera 7 (and current 8.0 beta) do not provide script access
to stylesheets. Not sure how far latest Safari or Konqueror are with
document.styleS heets etc. maybe someone else can say.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2
Martin Honnen wrote:
I am not sure whether I have ever tried to script a rule in an
imported sheet so I can't currently say without testing whether
Mozilla makes imported stylesheets available.


It does. Here's a quick hack, roughly tested with Mozilla and MSIE:

function modifyCSSRule(s Sel, sAtt, vVal) {
var oSheets,
i,
oMSIEImpSheet,
j,
rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleS heets))
for (i=0; i<oSheets.lengt h; i++) {
modifySheet(oSh eets[i], rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheets[i].imports))
for (j=0; j<oMSIEImpSheet .length; j++)
modifySheet(oMS IEImpSheet[j], rSel, sAtt, vVal);
}
}

function modifySheet(oSh eet, rSel, sAtt, vVal) {
var oRules,
j,
sText,
oMozImpSheet;
if ((oRules = oSheet.rules || oSheet.cssRules ))
for (j=0; j<oRules.length ; j++)
if ((sText = oRules[j].selectorText)) {
if (rSel.test(sTex t))
return !(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMo zImpSheet, rSel, sAtt, vVal);
}
For the OP, assumed that the correct rule is

html td {
font-style: italic;
}

(without an ancestor of HTML), the call should read

modifyCSSRule(' html td', 'fontStyle', 'normal')

ciao, dhgm
Jul 23 '05 #3
Martin Honnen wrote:
Andrew Poulos wrote:
[snip]
* html td {


Pretty odd selector


It's an IE hack. For some reason, IE doesn't believe that HTML is the
root element for HTML documents.
I know that Opera 7 (and current 8.0 beta) do not provide script
access to stylesheets.


I know that the styleSheets collection isn't available, but can you
get direct access via a reference to a LINK or STYLE element? I
haven't got around to reinstalling Opera yet after my hard disk
trashed itself.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4
Dietmar Meier wrote:
Here's a quick hack [...]


Did some corrections:

function modifyCSSRule(s Sel, sAtt, vVal) {
var oSheets, i, j, rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleS heets))
for (i=0; i<oSheets.lengt h; i++) {
modifySheet(oSh eets[i], rSel, sAtt, vVal);
}
}

function modifySheet(oSh eet, rSel, sAtt, vVal) {
var oRules, j, sText, oMozImpSheet, oMSIEImpSheet;
if ((oRules = oSheet.rules || oSheet.cssRules ))
for (j=0; j<oRules.length ; j++)
if ((sText = oRules[j].selectorText)) {
if (rSel.test(sTex t))
(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMo zImpSheet, rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheet.imports) )
for (j=0; j<oMSIEImpSheet .length; j++)
modifySheet(oMS IEImpSheet[j], rSel, sAtt, vVal);
}

ciao, dhgm
Jul 23 '05 #5


Michael Winter wrote:
Martin Honnen wrote:

I know that Opera 7 (and current 8.0 beta) do not provide script
access to stylesheets.

I know that the styleSheets collection isn't available, but can you
get direct access via a reference to a LINK or STYLE element?


As far as I remember for 7.xy it is not possible, those elements do not
expose a property named sheet as they would need to expose a style
sheet. I have just tested with 8.0 beta and again there is no such
property. Of course if those properties where there then
document.styleS heets should be easy.
So unless with direct access via a reference to link or style you meant
parsing their content by hand then no, with Opera access to stylesheet
information (style sheets in the document and rules in the style sheet)
is not provided.
So with Opera if you want to change some style rule all you can do is
create a new <style> element, throw in a text node with the complete new
rule as needed and insert the <style> element at the end of the head,
that way it overrides earlier rules but if you do that a lot it is
pretty inefficient.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #6

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

Similar topics

1
2613
by: Tony Benham | last post by:
I have been getting to grips with css recently (very slowly), and one area I have a problem is when to use class selectors or id selectors. Are there any guidelines when to use each type ? The key difference is, AFAICS, is that id selectors can only be used once, whereas class selectors can be used repeatedly ? Is this the main differentiator...
11
2016
by: Laurence Tureaud | last post by:
hello i'm just getting started with CSS & am reading through Eric Meyer on CSS, specifically the first chapter. he creates these styles: td#advert {stuff} #content-top td { stuff } tr td#sidetop {stuff }
4
4243
by: Andy Fish | last post by:
hi, I am using descendent selectors to format cells within a table according to the css class of the table. However, when using nested tables, it seems to pick up the outer matching rule rather than the inner one. here's a self-contained example: <HTML><HEAD> <style type="text/css"> table.foo td { background-color:red; }
7
2314
by: Philip Herlihy | last post by:
If I'm reading my reference books correctly, I should be able to pick out cells in a table by combining a <col> selector with a class selector, like this: col#thisid td.thisclass {color: red; } ... but it doesn't work. I can get the unadorned <col> selector to work in IE6 and Opera (not Dreamweaver 2004): col#thiscol {color: red; } ... but...
6
1885
by: Rhino | last post by:
What's the simplest way to determine which, if any, of my selectors are not needed in a given stylesheet? I have a small number of HTML pages that share two stylesheets; one stylesheet is for display purposes and one is for printing. I suspect that some of the selectors in my stylesheet are no longer needed due to deletions of parts of the...
1
2672
by: mplus_2000 | last post by:
I have recently inherited a database. The switchboard (and other forms) displays the name of the database on it (top, center). Currently the name that appears is Reviews. There are plans to roll out the application (i.e. making copies of the database) to other locations (Reviews-NY, Review-Dallas etc). If was mentioned today in passing by the...
2
1019
by: Bruce HS | last post by:
VS2005, VB. I put some buttons in winform A. I then create form B which inherits A. I want to move the buttons to a different location in form B, but find all properties of the button in the descendant set to readonly. Is there a way I can adjuste these properties in the descendant? This would make the visual inheritance much more...
3
1448
by: Bruce HS | last post by:
When I raise an event in an ancestor, the event fires first in the ancestor, then its descendant, and then in the descendant's descendant. I would like the descendant's descendant to fire first in one particular case. How do I accomplish this?
7
2666
by: John Dann | last post by:
I'm unclear as to how best to use what I'm terming the top-level CSS selectors, by which I mean selectors like *, html and body. I'm coming at this from trying to understand how best to set font sizes but I seem to have strayed into a broader question. Some CSS guides seem to suggest that a * declaration is good practice for any style...
5
1745
by: Nathan Sokalski | last post by:
I'm not sure if this is the right place to ask this question, but I wasn't sure where else to go. I have a table made of the following tags: <table class="myclass"> <tbody> <tr><td>.</td></tr> <tr><td>.</td></tr> <tr><td>.</td></tr> </tbody> </table>
0
7697
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7612
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8120
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7672
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7968
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6283
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5512
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5219
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
937
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.