By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

attribute selectors

P: n/a
Hello,

The thread on a List Apart made me go visit their site. Wow. If
there's a contest for the www's smallest font, they're in the running.
I thought it would be a good use of user css. And that led to a
question about attribute selectors.

I looked under the hood, and found the following body tag:

<body onload="window.defaultStatus='A List Apart, for people who make
websites.'" id="sectiontwo">

So, in my userContent.css the following:

body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] {
font-size: 100% !important ;
}

Restarted Mozilla, nothing. I have successfully used my user css for
other overrides, but this attribute selector thing has me stumped. Are
there any resources on using them outside of the css 2 spec?

--
Brian
follow the directions in my address to email me

Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Brian <us*****@julietremblay.com.invalid-remove-this-part> wrote:
I looked under the hood, and found the following body tag:

<body onload="window.defaultStatus='A List Apart, for people who
make websites.'" id="sectiontwo">

So, in my userContent.css the following:

body[onload="window.defaultStatus='A List Apart, for people who
make websites.'"] {
font-size: 100% !important ;
}

Restarted Mozilla, nothing. I have successfully used my user css
for other overrides, but this attribute selector thing has me
stumped.


Have you tested with a simpler case, like onload="foo()"? Maybe value
of the attribute causes problems, since the selector tests for _exact_
match (including the use of whitespace). And have you tested whether it
is specifically font-size setting that fails? After all,
font-size: 100% can mean different things, especially if some style
sheet sets font-size for the enclosing element (<html>, in this case).

On the pragmatic side, in this case you have the id attribute to play
with. This means that you can use the #sectiontwo selector, which works
on all CSS enabled browsers. But maybe they use id="sectiontwo" on that
particular page only, not site-wide - its name suggests that.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2

P: n/a
> body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] {
font-size: 100% !important ;
}


Maybe it has something to do with the specifity. Try something like

body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] * {
font-size: 100% !important ;
}

although this should be sufficient

body[onload*="A List Apart"] * {
font-size: 100% !important ;
}

--
David Håsäther
Jul 20 '05 #3

P: n/a
Brian <us*****@julietremblay.com.invalid-remove-this-part> wrote:
The thread on a List Apart made me go visit their site. Wow. If
there's a contest for the www's smallest font, they're in the running.
Too true. The minimum font size setting in my browser (Opera, but also
present in Mozilla) takes care of it though.
I thought it would be a good use of user css. And that led to a
question about attribute selectors.

I looked under the hood, and found the following body tag:

<body onload="window.defaultStatus='A List Apart, for people who make
websites.'" id="sectiontwo">

So, in my userContent.css the following:

body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] {
font-size: 100% !important ;
}

Restarted Mozilla, nothing. I have successfully used my user css for
other overrides, but this attribute selector thing has me stumped. Are
there any resources on using them outside of the css 2 spec?


Hmm. I used the id="sectiontwo", etc. when I wrote some user styles to
take care of the narrow columns on ALA (once the small font size had
been scrapped via my browser settings the lines were two short so I
made the whole layout fluid rather than fixed width, see
http://steve.pugh.net/taming.html for details of what I did).

Back on topic, for another side I added body[onLoad=""] as a selector
to my user stylesheet and that works in Opera 7. Yes, the site really
does have empty onLoad attributes on many of its pages!

Otherwise, apart from echoing what Jukka says have you considered
using a substring match for the selector?
body[onload*="A List Apart"]
This may avoid problems with exact mathing of the longer string and
also makes the stylesheet shorter and easier to comprehend when
editing.

cheers,
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4

P: n/a
In article Brian wrote:
Hello,

The thread on a List Apart made me go visit their site. Wow. If
there's a contest for the www's smallest font, they're in the running.
I thought it would be a good use of user css. And that led to a
question about attribute selectors.
I have long ago fixed font size issues in general user stylesheet, as you
propably want same size text for all pages, it makes sence to say
p {font-size:xxy !important;}
I looked under the hood, and found the following body tag:

<body onload="window.defaultStatus='A List Apart, for people who make
websites.'" id="sectiontwo">

So, in my userContent.css the following:

body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] {
font-size: 100% !important ;
}

Restarted Mozilla, nothing. I have successfully used my user css for
other overrides, but this attribute selector thing has me stumped. Are
there any resources on using them outside of the css 2 spec?


You could try what browser says if you say
body:before {content:attr(onload)}


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #5

P: n/a
solution found, fyi

Brian wrote:

The thread on a List Apart made me go visit their site. Wow. If
there's a contest for the www's smallest font, they're in the running.
I thought it would be a good use of user css.


What didn't work:

body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] p {
font-size: 100% !important ;
border: thin solid yellow;
}

body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] div#menu li#one {
font-size: 200% !important ;
border: thin solid yellow;
}
I thought the latter one would offer enough weight, but no.

What did work:

body[onload="window.defaultStatus='A List Apart, for people who make
websites.'"] * {
font-size: 100% !important ;
border: thin solid red;
--
Brian
follow the directions in my address to email me

Jul 20 '05 #6

P: n/a
David H?s?ther wrote:

this should be sufficient

body[onload*="A List Apart"] * {
font-size: 100% !important ;
}


Did not work. (tested by including a blue border)
May I ask where the attribute* selector is in the spec? I didn't find
it under selectors.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #7

P: n/a
Brian wrote:
David H?s?ther wrote:
this should be sufficient

body[onload*="A List Apart"] * {
font-size: 100% !important ;
}
Did not work. (tested by including a blue border)


Sorry, it did work. My testing has not been done very carefully.
May I ask where the attribute* selector is in the spec? I didn't find
it under selectors.


Still wondering about this.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #8

P: n/a
Brian wrote:
Still wondering about this.


<http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-substrings>

Mozilla supports some parts of CSS3.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.