h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

I get confused about this so I could be wrong, but I think the way you describe "ID" is actually the description of "class". The syntax is slightly different, so to use your example with "class" would be:

.booktitle
{color: #0000CC;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-variant: italic;
text-transform: capitalize;}

Then in the HTML
Title of Book

My understanding of "ID" (again I could be wrong since the W3 documentation is as clear as mud) is that it identifies a unique element of a page that will only appear once. This is more useful when you use stylesheets for postitioning elements on a page - you can specify exactly where something is supposed to go without worrying that more than one thing has that ID and will end up in the same spot.

Your right, I always thought the ID was the Adentifier and the Class was the Style, either from TAG.CLASSNAME or .CLASSNAME...

Theres name as well, but thats got other uses
Remeber ID is used in the W3C getElementById JavaScript Refrance mainly,


-- DoctorMO --

It's even worse. The modern recommended variant is e.g.

p[@class='first'] {...}

...

...



Fortunately, almost nobody does this.

*frowns at code*

OK so that dosn't make much sense.

-- DoctorMO --

Sorry, it must have read: p[class='first'] {...}

See http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html for details.

Oh OK.

-- DoctorMO --

That's actually a little different. You're right in that

p.first {...}

and

p[class=first] {...}

do the same thing, but the second syntax is meant to match *any* attribute, not just "class", whereas the first is meant specifically for matching classes. You should use the first syntax in most cases.

An example of where you would use the second might be something like

img[height=60px] {...}

which would apply a certain style to all images that had their height set to exactly 60 pixels, or a more useful example:

img {background: cyan}
img[alt] {background: white}

with those two styles (theoretically, I haven't tried it yet) if you forgot to set your "alt" attribute your images would have a cyan background, but if you added the alt attribute the background would turn white. That could serve as nifty reminder to set the alt attribute for images.

having now tried it I can say that it does NOT work

however I could get similar things to work using the tag instead of , using completely made-up attributes

p {font-size: 30px}
p[gloop=smith] {font-size: 16px}


worked great when I added

some text
Some other text

even though "gloop" is not valid html.

This works:

img {border: solid cyan 10px}
img[alt] {border: none}

the other didn't because you can't see the background if the image does not have transparency.

yes that makes sense, I might use that... I'd use the Title Tag though, because it's W3C standard as well as the Alt tag.

wounder how you'd do that?

The made up tags, hehe, I used some of these in my javascript were I go getElementById('Object').getAttribute('MadeUp') and it works too.

-- DoctorMO --

The issue is that p.first will not be supported in upcoming versions of HTML. It is HTML specific, but beyond HTML 4.01 everything will be XML, and for XML,

p[class="first"]

is the only possibility.

However, although I'm very keen to use newest standards, even I don't use it. It makes the CSS quite chaotic and may be misinterpreted by some browsers.

I know, it implies a

foreach Element { if TAG is [this] { Apply Style } }

weird. a class or even better a HTML or XML ClassName or ClassRef would be much more usefull. (although this dosn't mean that this isn't usefull I could be)

-- DoctorMO --

Are you sure?

'Within the XHTML namespace, user agents are expected to recognize the "class" attribute. Therefore, style sheets should be able to continue using the shorthand "." selector syntax.'

from http://www.w3.org/TR/xhtml1/#C_13

hmmm, *thinking*... Sounds confusing

-- DoctorMO --

Actually I just wanted to add a little bit of confusion to this thread but now we seem to have lost at least one co-reader.

Anyway: The page you are refering to is only informative and non-normative. It expresses a certain 'hope'. On http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#q1 it says that it's HTML only. And XHTML is not HTML, but an XML derivative. All the other selector expresssions can be used for XML, too.

Which doesn't mean that I expect the browsers to actually stop supporting the '.' shortcut.

Well if you wanted to confuse, all you had to do is say "normative" and "informative" right at the start. I never understood that.

I got it, Thanks

I think that there's always alot of hopefull adapations to new standards, that were the confusion is.

-- DoctorMO --