Reducing duplicate id's

HTML & CSS
1

I’m looking at the css below and wondering if the #detailWrapper can be reduced to just 1 at the front rather than it being used over and over.

#detailWrapper #b1 a:link, 
#detailWrapper #b1 a:visited, 
#detailWrapper #b1 a:hover, 
#detailWrapper #b1 p,
#detailWrapper #q1 button, 
#detailWrapper #b2 a:link, 
#detailWrapper #b2 a:visited, 
#detailWrapper #b2 a:hover, 
#detailWrapper #b2 p, 
#detailWrapper #q2 button, 
#detailWrapper #b3 a:link, 
#detailWrapper #b3 a:visited, 
#detailWrapper #b3 a:hover, 
#detailWrapper #b3 p, 
#detailWrapper #q3 button, 
#detailWrapper #b4 a:link, 
#detailWrapper #b4 a:visited, 
#detailWrapper #b4 a:hover, 
#detailWrapper #b4 p, 
#detailWrapper #q4 button {
    color: white;
}
2

Without seeing the rest of your code I’m guessing, but I’d say the answer is probably no.

Do you have any instances of #b1, #q1, etc. that are not children of #detailWrapper? If you don’t, then you might be safe to remove it, but each comma-separated selector is independent of the others, so removing #detailWrapper from #detailWrapper #b1 p, for example, leaves you with #b1 p, which does not necessarily target the same elements.

2 Likes
3

If you are talking about the comma separated list of selector rules then you need to know that each rule is a completely separate rule in its own right. It just shares styles that you list.

The comma indicates that one selector has finished and a new one starts just as if you had two different style blocks.

e.g.

.test1 a,
.test2 a{
color:red;
}

is equivalent to:

.test1 a{color:red}
.test2 a{color:red}

Just because they are listed with a comma does not mean that they share anything in common apart from the styles in the bracketed declarations block.

However your use of #detailwrapper #b1 is superfluous. IDs are unique on the page so concatanating 2 ids together does not make it more unique. It does of course add to specificity and complicates issues further. (See Technobears above also.)

If you are using ids then just use one id. e.g. #b1 a{color:green}

Usually long selectors with ids suggest a bad practice has been used along the way.

It is better to stick to classes most of the time anyway.

Yes I guess that some pages may need a unique styling and adding a parent wrapper would allow the differentiation to occur.

2 Likes
4

Ye I got you, I’m looking at it all now and I need to put it all together better. That’s what happens when your rushed I suppose, but got some time will go through, thanks both

5

Also note that if you have not previously defined :link and :visited states then you can set them all just using a{color:red}

1 Like
6

That was pretty painless, just needed a kick up the butt I suppose.

managed by adding a class to reduce it to

#detailWrapper .countryBlocks p, .countryBlocks button {
    color: white;
 }

Thanks guys

2 Likes
7

On reason to understand this lies in the fact that IDs have specificity stronger than classes. SO they override with a “chainsaw”.

If you only stick to classes, you can adjust the specificity in a better way to decide what rule override or reset what rule.

8

If you use SASS, you can remove repetitions like this.
The line with extend would contain

#detailWrapper {
    & p, & button {
    color: white;
  }
}

The is a difference in using a class .countryBlocks in the rule and using a:hover in the rule.
.countryBLocks cannot be used as an alias for a:hover.

You can use lists in SASS if you have a long list of a:hover and other.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.