ansaurus

Question

CSS combining a Class selector with an Id

Answer 1

+1 A:

Should be working! That's odd. Try flipping them over, as in .large#someId.

henasraf 2010-02-25 10:53:21

Should be working? where? in what browser on what platform? please be more specific.

Jacco 2010-02-25 10:55:10

Should be working everywhere, that's a pretty basic selector, it's not even a pseudo-thingy.

henasraf 2010-02-25 10:56:07

Welcome to cross browser development :(

Jacco 2010-02-25 10:57:34

Answer 2

+4 A:

quirksmode have a table of which selector (among other things) browser supports. unfortunaltly, there is not test for combining selector. but as ie6 fail multiple classes it's not that surprising.

w3c css specification explains how css selector should works, there is a DIV.warningand E#myid which are not exactly like yours but suggest it should work (maybe it's explain in the page I didn't read it all ;) )

mathroc 2010-02-25 11:03:47

IE6 fails mltiple classes? Lame.

henasraf 2010-02-25 11:13:10

Lame it may be, it is still a requirement for me to get it working in IE6

Jacco 2010-02-25 11:17:27

Answer 3

+1 A:

Crikey. I’ve never come across this one before, but you’re totally right. Your code should work as you’re expecting.

I’m pretty sure it’s only IE 6 that’ll have a problem with it.

Paul D. Waite 2010-02-25 12:05:44

Answer 4

+2 A:

if you do not need "#someId" to be an id you can make it to a class ".someId" and then use the other two classes to extend where needed... like this class="someId medium" ect. Try this and see if it will work. Besides it`s a better solution anyway because you can not have two ids with the same name on one page.

.someId {
   background-color: red;
}
.medium {
   width: 300px;
}
.large {
   width: 500px;
}

and then..

<div class="someId medium">hello, world</div>

or

<div class="someId large">hello, world</div>

aleksandar 2010-02-25 12:31:52

Since IE6 does not support multiple classes, your solution makes no difference from the original. but I need the Id anyhow. Also, the Id is unique per document.

Jacco 2010-02-25 12:37:41

ok i tried... :(Anyway you still can`t have more then one unique id on the same page. And are you sure about this thing with multiole classes? because i use this method when writing css and it always worked for me. For testing im using IETester...

aleksandar 2010-02-25 12:46:52

IE 6 supports multiple classes in HTML. What it doesn’t support properly is the multiple class *selector* in CSS. So `class="someId medium"` works, but to IE 6, `.someId.medium` and `.medium` are the same selector.

Paul D. Waite 2010-02-25 12:49:53

Answer 5

A:

Not sure if dragging a Javascript library into the mix is possible in your application, but a lot of CSS that doesn't work well in IE6 is possible when using jQuery.

However, if you have no other use for a the 24kb jQuery library, it seems a hefty addon for a single CSS-attribute. Maybe you can go with graceful degradation?

Adrian Schmidt 2010-02-25 14:08:42

Using javascript to solve a CSS issue would mix scripting and layout. So this option is out. There are other options to fix this; If it is only IE6 we will write fix it in a separate stylesheet.

Jacco 2010-02-25 14:15:58

Answer 6

+1 A:

One thing you could try is being more verbose than you would like to be. Add to the class names like so:

<div id="someId" class="someId-medium">hello, world</div>

or

<div id="someId" class="someId-large">hello, world</div>

and then change your CSS to this:

#someId {
    background-color: red;
}
.someId-medium {
    width: 300px;
}
.someId-large {
    width: 500px;
}

Scott Cranfill 2010-02-25 15:12:14

This is the backup plan.

Jacco 2010-02-25 15:13:16

Yeah, I agree; it's not ideal.

Scott Cranfill 2010-02-25 15:19:19

Answer 7

+1 A:

Like some mentioned above, ID a unique identifier, thus should only be used once in a page. Normally, ID's would be used for major sections in your mark-up like #header, #content #footer, etc... for the rest, just use classes.

As for your text, change the #someId to .someId and then you can use .large or .medium since you can apply multiple classes to an element.

<div class="someId large">hello, world</div>

And your CSS would be

.someId { background-color: #ccc; }
.large { font-size: 50px; }
.medium { font-size: 25px; }

Also... if the text "Hello, World" is a title, I strongly suggest you use the proper elements (h1, h2, etc...) and tweak their styles rather than create new ones.

Hope this helps!

EDIT: For the comment below, here's a little HTML code that I've just tested out in IE6 and works. It works in FF and Opera as well so I'm assuming it works in Safari and Chrome too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    .something { background-color: #ccc; }
    .else { color: #090; }
    </style>
</head>

<body>

    <div class="something">This is just something</div>
    <div class="else">This is just else</div>
    <div class="something else">This is something else</div>

</body>
</html>

Karinne 2010-02-25 18:52:23

This question is about cross-browser feature support in combination with the specification.

Jacco 2010-02-25 22:28:04

Multiple classes works, even in IE6. See edited response above.

Karinne 2010-02-26 15:15:12

ansaurus

tags:

views:

answers:

CSS combining a Class selector with an Id

related questions