Changing CSS 2.1 descendant selectors

Andrew Poulos

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

Subscribe Post Reply

1950

Martin Honnen

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.html#StyleSheets-StyleSheet-DocumentStyle>
<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#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.styleSheets (for the <link> and
<style> embedded sheets), in document.styleSheets[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.styleSheets etc. maybe someone else can say.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2

Dietmar Meier

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(sSel, sAtt, vVal) {
var oSheets,
i,
oMSIEImpSheet,
j,
rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleSheets))
for (i=0; i<oSheets.length; i++) {
modifySheet(oSheets[i], rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheets[i].imports))
for (j=0; j<oMSIEImpSheet.length; j++)
modifySheet(oMSIEImpSheet[j], rSel, sAtt, vVal);
}
}

function modifySheet(oSheet, 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(sText))
return !(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMozImpSheet, 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

Michael Winter

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

Dietmar Meier wrote:

Here's a quick hack [...]

Did some corrections:

function modifyCSSRule(sSel, sAtt, vVal) {
var oSheets, i, j, rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleSheets))
for (i=0; i<oSheets.length; i++) {
modifySheet(oSheets[i], rSel, sAtt, vVal);
}
}

function modifySheet(oSheet, 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(sText))
(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMozImpSheet, rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheet.imports))
for (j=0; j<oMSIEImpSheet.length; j++)
modifySheet(oMSIEImpSheet[j], rSel, sAtt, vVal);
}

ciao, dhgm

Jul 23 '05 #5

Martin Honnen

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.styleSheets 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

Similar topics

Id v Class Selectors

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...

HTML / CSS

basic descendant selector question

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...

HTML / CSS

priority of descendent selectors

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...

HTML / CSS

Unable to style tables by <col> and descendant class

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; }...

HTML / CSS

Finding unused selectors?

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...

HTML / CSS

Changing Switchboard Textbox Title Via Text Document

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...

Microsoft Access / VBA

Changing visually inherited objects in descendent

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...

.NET Framework

Changing order of event processing

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...

.NET Framework

Using top-level selectors

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...

HTML / CSS

Adjacent Sibling Selectors in CSS

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>...

ASP.NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

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...

Computer Hardware

What is ONU?

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,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General

AI Job Threat for Devs

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,...

Career Advice