View Full Version : CSS Selectors

09-25-2004, 04:01 PM
Is ok to use .class#id to select an element of type "class" with an id of "id"? If not, what is the right way?

09-25-2004, 05:35 PM
.class element#id

element refers to the element in which the id is applied.

.class div#id {
text-transform: uppercase;

Is this what you wanted? I think it would be what you wanted since id's should only be applied once per page (no clue what happens if they are applied multiple times in a single page). If you wish to use it more than once in a given page, make it a class.


CSS isn't that advanced yet. ;)
This is like using IC or XM to write numbers using Roman Numerals because that system of shorthand was never fully-developed.

09-25-2004, 06:01 PM
.class div#id would surely select a div element with the id, "id" contained within a element of class, "class".

09-25-2004, 06:32 PM
Yeah..., so? Just change div to whatever element you are using.

09-25-2004, 07:44 PM
Yeah..., so? Just change div to whatever element you are using.I think he wants the opposite; i.e., selecting a class contained within an id.

I don't see why "#id .class" wouldn't work... a question, though: since you're calling the class anyway, why would it matter what id it was in? I mean, I can see the concept, but I am imagining that if the classes were named appropriately it would be a moot issue...

09-25-2004, 08:02 PM
Remember specificity. I think simply declaring your rules in this order:

.fooClass { ...}
#fooID { ...}

And having this markup:

<foo id="fooID" class="fooClass" />

will give you what you want. I've thought of this as well, but I think CSS is in fact already advanced enough to handle it, just not that specific way of declaring it.

09-25-2004, 08:19 PM
Naw, it's doable:

div#id.class {
// style for a div whose id is "id" and is part of the "class" class.

09-26-2004, 01:00 AM
I'm with Seth. (holy crap dude - twice in one day... you should put me on the payroll :D)
If you're using classes correctly you shouldn't need to use that selector anyway...
Let's have a look at the situation...
-You have a class, which indicates that you wish to use this style on multiple elements.

.class {declarations}

-You also have a single element which belongs to that class which you want to style differently; so you've applied an id. Any changes you wish to make from the defined class could be made from the id selector.

.class {standard rules}
element#id {variations on that rule}

By putting the element's name before the #id selector you are ensuring that it has a higher specifity - ie; the rules contained within it will always over-ride the rules of the class, regardless of order.

If you feel this isn't indicative of your situation, can you please post the (x)html :)

09-26-2004, 11:35 AM
IDs are unique so generally any other selectors in a rule that ends with an ID are redundant.

Having said that i usuall put them in anyway to make the code more readable, plus you have to consider specificity.

Basically you should be ok to just use the ID and not the class in this instance.

09-26-2004, 01:51 PM
So what if you had a list of products, any of which could be on sale, and one of which is dubbed the most popular product? Surely you'd want to style it differently if it's both the most popular product AND on sale? Maybe you don't want your most popular product looking like any other on-sale item?

How else would this be done without making a new id or class? I just think it'd have its uses somewhere...

09-26-2004, 02:27 PM
Well yeah - if you have a bunch of elements with a dynamic class, and at some point you want to identify an element by ID, which must be [but may or not be] part of that class at the time - this would be way to do it.

My instinct would be "element#id.class" but I can't see why either wouldn't work ... does it?

09-26-2004, 03:47 PM
div.foo#bar doesn't work.

09-26-2004, 11:25 PM
AaronW is correct
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>CSS Selectors</title>
<style type="text/css">
#txt_id.txt_class {
<p id="txt_id" class="txt_class">
This text will recieve styling
<p class="txt_class">
This text will recieve no styling

09-27-2004, 04:05 AM
It doesn't work because IDREFs (ID references) takes precedence over CDATA (character data). Therefore, IDs must come before classes.

*I almost sounded like I knew what I was talking about!*

Feel free to expand on or reprimand this post.