CODEWITHSUNDEEP
css
Pavlos1316
Pavlos1316

Reputation: 444

CSS styling multiple ID's

instead of this:

#1 span.error { color: #fff; }
#2  span.error { color: #fff; }

Is it better/quicker to use:

#1 span.error, #2 span.error { color: #fff; }

Is there a way to shorten even more?

I am accepting Ana's answer, but for me agam360 hit the target first. Thank you all

Upvotes: 1

Views: 7731

Answers (2)

Ana
Ana

Reputation: 37169

Yes, I believe it is better - you avoid redundancy and if you have this situation multiple times, it can significantly reduce the size of your CSS.

Even shorter would be to add the same class to the two ids. Something like:

<div id="#1" class="myclass">
  <span class="error">error text 1</span>
</div>
<div id="#2" class="myclass">
  <span class="error">error text 1</span>
</div>

and then you can write:

.myclass span.error {
  color: #fff;
}

If you don't have any span.error elements outside the elements having ids #1 and #2, then you could compact this further to just span.error { color: #fff; }

If, in addition to this, the elements having class .error are always <span> elements, them it cam become .error { color: #fff; }

So how much you can compact things really depends on your HTML structure.

Upvotes: 3

Sotiris
Sotiris

Reputation: 40046

Depends on the structure of your page.

span.error { color: #fff; } would shorten it more, or if the ancestor is required to be in the rule and follows a pattern you could write something this div[id*='pattern'] span.error. In this example the ancestor is a div that id contains the text "pattern". You can modify it to fit your needs.

Upvotes: 1

Related Questions