How to Give a CSS Class Priority Over an Id

.stats {  text-align: left;  position: absolute;  font-family: guy;  font-size: 20px;  bottom: 0;  border:1px solid;}
#queue {  text-align: right;}

<div class="stats">  <p>Online Users: 100</p>  <p id="queue">Players in Queue: 1</p></div>

CSS class priority

CSS is all about context.

The style an element receives depends on:

1. Specificity
2. Position in the cascade

Specificity

• p {} is less specific than
• p.introduction {} which is less specific than
• article p.introduction {} which is less specific than
• article#profile p.introduction {} etc.

Cascade

For situations where specificity is equivalent...

• In article p {color: green;} body p {color: red;} the paragraph text will be red.

• But in body p {color: red;} article p {color: green;} the paragraph text will be green.

So, although you write:

I would like to have a class [...] called .themecolor that I can put on
any element that I want to take on that background-color.

as you will have seen, using:

.themecolor {
background-color: rgb(47, 86, 111);
}

will often not work - because, your .themecolor declaration might easily (albeit accidentally) get overridden by a more specific selector elsewhere in your stylesheet, or by a selector of equivalent specificity further down the cascade.

Better then, to group selectors together, using your .themecolor as a quasi-variable:

.THEMECOLOR,
.navbar.themecolor,
.glyphicon.themecolor {
background-color: rgb(47, 86, 111);
}

You will then be able to add as many new elements to this list as you wish, always stating the main Bootstrap class of the element immediately followed by .themecolor:

.THEMECOLOR,
.class1.themecolor,
.class2.themecolor,
.class3.themecolor,
.class4.themecolor,
.class5.themecolor,
.class6.themecolor {
background-color: rgb(47, 86, 111);
}

N.B. The syntax .class1.themecolor means:

When an element has .class1 and it has .themecolor

Class selector priority over several unique ID's

Absolutely, you can keep nesting your styles in order to increase the specificity and target the element.

You could use !important but that should be a last option. Otherwise your code will not be scalable after a certain point and is considered a worst practice.

And put, id's first since they carry more weight (Just a pattern which in no way affects specificity)

#green-text.white-text {
    color: white;
}

Once you associate a style to an id.

• The only way to override would be is to use !important (Avoid it)
• Use a more specific style (which is always nested inside the id so
  that you are targeting it).
• Use inline style which has a better specificity than the id

In the long run it won't be maintainable. So it is always a better idea to replace it with a class instead

.green-text.white-up-text {
    color: white;
}
.grey-text.white-up-text {
    color: white;
}
.orange-text.white-up-text {
    color: white;
}

Also take a look at OOCSS which advocates the principle of code reuse, where classes are the king.

CSS ID starting with some string having highest priority

One attribute selector is equally specific to one class selector. But here you have two class selectors, which is more specific than just one attribute selector. And since both rules have important width declarations, the order of precedence is not changed at all by !important — the first rule will override the second by specificity alone.

You can fix this by balancing the specificity, by adding the two class selectors to the second rule:

.someClass.modal{    width:100px !important;    border:1px solid #4c4c4c;}.someClass.modal[id^=prod]{      width:50px !important;}

<div id="product1" class="modal someClass">Test</div><div id="product2" class="modal someClass">Test</div><div id="product3" class="modal someClass">Test</div><div id="product4" class="modal someClass">Test</div>

.hello {
  background-color: blue;
}

.mystyle {
  background-color: red;
}

#header ul li a#get_started