Usage of multiple IDs in CSS selectors - Thoughts?

[BillyRayPreachersSon]

I was thinking about this earlier, and thought I'd open it up for discussion - just to see what people thought.

If you have some CSS that affects an element with a certain ID, for example:

#myId {
   background-color: red;
}

...

<div id="myId">Hello World!</div>

then the div would have a red background. If that div were within another div, we could also use this:

#myContainer #myId {
   background-color: red;
}

...

<div id="#myContainer">
   <div id="myId">Hello World!</div>
</div>

However, even if the "#myContainer" is not included in the style sheet, the "#myId" div will still be affected.

So the questions: even though in that situation, the first id would not be needed, would you, and do you think it could be beneficial to put it in for clarity?

For example, if the outer id was the id of an element containing a section of the page, it could certainly make it easier to know what section the inner div was in. I guess you could argue that if the inner div had a meaningful id anyway, that would not be necessary.

Just wondering where people stood on this!

Dan

 

[kpetursson]

if you wanted to find the inner div, you could simple use the find command in any half decent text editor (even notepad can do it).
But yes, I put in the hiarchael structure in my css, I think it aids in the understanding of the intent.
The down side would be the ability to have the sub div behave differently in different parrent div's

#myContainer #myId {
   background-color: red;
}
#myOtherContainer #myId {
   background-color: blue;
}

...

<div id="#myContainer">
   <div id="myId">Hello World!</div>
</div>

<div id="#myOtherContainer">
   <div id="myId">Hello World!</div>
</div>

Should give you a "hello world" on red, followed by a "hello world" on blue.

Depending on you view this could be a benifit.

Kevin Petursson

 

[BillyRayPreachersSon]

The down side would be the ability to have the sub div behave differently in different parrent div's

You are assuming that people would break the rules and use an ID more than once per page, however. I assumed that that would not be the case.

Good to hear your views on clarity, however.

Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Vragabond]

I must say that I think using IDs as selectors has gone a little overboard in CSS. I understand you might want an element to have an id if you need to reference it via JavaScript but if it is purely for CSS, I encourage people to use classes. I think having initial layout defined with ids is a very good idea but specific elements within that current layout should IMHO be mostly classes. Because those elements should be reusable many times on the page and I've seen it too many times when people start using one id for many elements that way. My personal preference, for the simplicity of code is having ids for main containers, default html elements inside their respective containers and special classes for anything that breaks that rule. So, something like this:

#myContainer {
   background-color: red;
}

#myContainer div {
   font: sans-serif;
}

#myContainer .highlight {
   font-weight: bold;
   color: blue;
}

...


<div id="#myContainer">
   <div>Hello World! <p class="highlight">I said HELLO WORLD</p></div>
</div>