3

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 ?

Zed
  • 5,683
  • 11
  • 49
  • 81
  • 1
    try `.myclass { background-color: 'green' !important; }` – Khanh TO May 10 '15 at 10:04
  • 1
    My answer here is relevant: http://stackoverflow.com/a/19399881/1317805 – James Donnelly May 10 '15 at 10:05
  • 1
    @JamesDonnelly , I can't use ID's, but repeating css class selector really seems interesting, I'll try that! – Zed May 10 '15 at 10:32
  • It's wrong syntax `background-color: 'green'` by the way, it must be without the quotes, and this tool can be quite useful - http://josh.github.io/css-explain/ one more link - http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ – Stickers May 10 '15 at 15:41

1 Answers1

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  {}
CosX
  • 1,920
  • 2
  • 15
  • 25
  • as I said, I don't know on which specific DOM element this class will be added, so I can't use id of a parent. – Zed May 10 '15 at 10:30
  • You could specify it to a set element. If you use div then div.myclass – CosX May 10 '15 at 10:35