Multiple id's that have the same child classes. Need selectors

Question

So I'll have the following markup:

<div id="content-sidebar">
    <div class="entry">
    </div>
    <div class="sidebar">
          Sidebar Content
    </div>
</div>

It is styled with the following:

#content-sidebar{
    float: left;
    padding-left: 10px; 
    position: relative;
    width: 580px;
    text-align: left;
    padding-right: 20px;
    background: url(../_images/content-line.gif) top right repeat-y;
   }

#content-sidebar .entry{
        position: relative;
        padding-left: 16px;
    }

#content-sidebar .entry a:hover {
        color: #5CB414;
        text-decoration: none;
}

I also have markup that uses a different styling for the parent div WITHOUT a sidebar (just adjusts the width), but needs the same for the child .entry class.

<div id="content-nosidebar">
    <div class="entry">
    </div>
</div>

the content-nosidebar id needs some slightly different styling, but the .entry child selector is exactly the same.

#content-nosidebar{
    padding-left: 10px; 
    position: relative;
    text-align: left;
    padding-right: 20px;
}

What selectors will tell it to use content-sidebar and content-nosidebar with the .entry class without having to use redundant code? Is #content-sidebar .entry, #content-nosidebar .entry{} the best way or is there another way to select these?

Thanks!

Answer 1

If .entry covers more elements than #content-sidebar .entry, #content-nosidebar .entry would, then without knowing the exact structure of your document you'll have to make do with selecting by both IDs explicitly.

Or you could cheat by using an attribute prefix selector, if you really don't want to modify your HTML, but I wouldn't recommend it unless you know what you're doing (it's often cleaner and simpler to modify your HTML to suit your selectors instead):

div[id^="content-"] .entry

Answer 2

The selectors you can use depends on what you want to do.

.entry {} will apply to the class in both containers. Any CSS share between the two should be added in the simple selector, which should be listed in your CSS.

From there, if you want to customize either column, or have CSS that only applys to one column, but not the other, you can use either #content-sidebar .entry{} or #content-nosidebar .entry{}.

If there are other places that you have an .entry class, and you want CSS that applies to both #content-sidebar and #content-sidebar, you can use the combined selector #content-sidebar .entry, #content-nosidebar .entry{}. In this context, it might make more sense to add a common class of .content to #content-sidebar and #content-nosidebar. This would allow you to use a selector of .content .entry, instead of having to shove those IDs into all your CSS.

<div id="content-sidebar" class="content">
    <div class="entry"></div>
    <div class="sidebar">Sidebar Content</div>
</div>

<div id="content-nosidebar" class="content">
    <div class="entry"></div>
</div>

The CSS would make the most sense in the following order:

.entry {
    /** CSS common to all .entry elements **/
}
.content .entry {
    /** CSS common to all .entry element in all .content areas **/
}
#content-sidebar .entry,
#content-nosidebar .entry{
    /** CSS common to .entry elements inside #content-sidebar and #content-nosidebar **/
}
#content-sidebar .entry{
    /** CSS specifically for .entry elements inside #content-sidebar **/
}
#content-nosidebar .entry{
    /** CSS specifically for .entry elements inside #content-nosidebar **/
}

The reason you build your CSS this was is for

• Efficiency - Common CSS is applied globally instead of repeated multiple times thoughout the CSS
• Organization - Common CSS is listed first, while more specific CSS for specific sections are grouped and listed afterwards, dispute the CSS specificity of the selectors making the order irrelevant.

Good luck out there. -Matt