Most specific CSS selector for a class

Question

I have a CSS class, let's call it myclass

.myclass {
  background-color: 'green';
}

that is being added dynamically to the elements on the page. This works well, but when there is more specific selector, for example: input[type='text'] , it's background-color property is used. Now, I need to write more specific selector, although I don't know on which element in the DOM this class will be added, so that will overwrite all other selectors on that element. Maybe I could start with something like this :

html body .myclass {
   background-color: 'green';
}

or there is a better way ?

Answer 1

I would recommend reading about selector specificity. Wrapping it around an (for example) ID would increase the priority for that element.

#myid .myclass{ 
    background: green; 
} 

Or you could specify .myclass to an element.

div.myclass  {}