Is it possible to have multiple ID selectors in CSS

Question

Is this correct and does it work correctly across browsers?

<div id="test">
  Some stuff
    <div id="anotherTest">
      More stuff
    </div>
  Even more stuff
</div>

CSS...

#test #anotherTest {
  color:red;
}

Only "More stuff" would be in red.

I know I could use classes and there are several different ways to achieve this but basically I'm asking about selecting an element with CSS via several IDs?

Thanks.

in your example if you set #test to red, #anotherTest will be red too by inherit of parent, if there is no other css that change it. — aahhaa, Aug 07 '14 at 13:12
Sure, you can do that, but it is meaningless, since there can only be one `#anotherTest` element in your document. — , Aug 07 '14 at 13:12
Sure that will work, just make sure that the `id` is only used *once per page* — misterManSam, Aug 07 '14 at 13:13

Sunil Hari · Answer 1 · 2014-08-07T13:27:58.517

5

Yes this approach is possible

#test #anotherTest {
  color:red;
}

It selects the element with id anotherTest which has the ancestor with id test

Please READ this

edited Aug 07 '14 at 13:27

answered Aug 07 '14 at 13:10

Sunil Hari

1,716
1
12
20

*An ancestor* with id "test", not the parent. – Alohci Aug 07 '14 at 13:27

Sander Koedood · Accepted Answer · 2014-08-07T13:34:03.347

To answer your question, it works cross browser, and what you wrote is correct. Only "More stuff" will be in red.

But it is not recommended to use ID's for styling. A nice reference to read more about this can be found here. The entire article is a great read by the way, if you want to learn more about writing good CSS!

The most important part of it, concerning IDs is:

IDs can never be used more than once in a page.
Classes can exist only once, or a million times in a page.
IDs can often have their traits abstracted out into many reusable classes.
An ID is infinitely more specific than a class.
This means no amount of chained classes can override an ID.

score 1 · Answer 3 · answered Aug 07 '14 at 13:16

1

Yes this is possible.

If you want both #anotherTest and #test to be red, add a comma.

#test, #anotherTest {
    color:red;
}

answered Aug 07 '14 at 13:16

Vernard Luz

281
3
7

score 1 · Answer 4 · answered Aug 07 '14 at 13:25

There are several ways to style a web page using CSS, but it seems your question is not only related to style but rather even on selectors. Check out the below w3school link about CSS Selectors

http://www.w3schools.com/cssref/css_selectors.asp

and an excellent demo of CSS Selectors in action

http://www.w3schools.com/cssref/trysel.asp?selector=.intro

And it supports across all popular browsers.

score 0 · Answer 5 · edited Aug 07 '14 at 13:15

0

You should try to use classes always, i.e:

<div class="test">
  Some stuff
    <div class="anotherTest">
      More stuff
    </div>
    <div class="andAnotherTest">
      Even More stuff
    </div>
  Even more stuff
</div>

and then in css:

.test .anotherTest {
   color: red;
}

.test .andAnotherTest {
  color: green;
}

edited Aug 07 '14 at 13:15

misterManSam

24,303
11
69
89

answered Aug 07 '14 at 13:13

Michel Tomé

389
2
11

Why always use classes ? When you only need one you use id – singe3 Aug 07 '14 at 13:15
Read more [here](http://stackoverflow.com/questions/298607/css-best-practice-about-id-and-class), you should only use id's for an element uniqueness, otherwise you should use classes. – Michel Tomé Aug 07 '14 at 13:21
That's what I said ... Anyways this wasn't the issue here – singe3 Aug 07 '14 at 13:24

Is it possible to have multiple ID selectors in CSS

5 Answers5

Linked