How do I give a CSS class priority over an id?

by

Do not use !important because it is the worst solution, if you want to switch the styling then do it that way.

#idname{
  border: 2px solid black;
}

#idname.classname {
  border: 2px solid gray;
}
<div id = "idname" class="classname">it is a test</div>

If you want to target also other elements with the class classname and not only the #idname then use:

#idname.classname, .classname {
  border: 2px solid gray;
}

More Related Contents:

  1. What are the implications of using “!important” in CSS? [duplicate]
  2. Why doesn’t nth-of-type/nth-child work on nested elements?
  3. CSS negation pseudo-class :not() for parent/ancestor elements
  4. How can I select the last element with a specific class, not last child inside of parent?
  5. How can I style even and odd elements?
  6. Several elements with the same ID responding to one CSS ID selector
  7. Matching the first/nth element of a certain type in the entire document
  8. Using CSS :before and :after pseudo-elements with inline CSS?
  9. Difference in applying CSS to html, body, and the universal selector *?
  10. How can I correctly select the first or the last child with CSS?
  11. Using :before and :after CSS selector to insert HTML [duplicate]
  12. What is syntax for selector in CSS for next element?
  13. :nth-child(even/odd) selector with class [duplicate]
  14. How to CSS: select element based on inner HTML [duplicate]
  15. What is the performance impact of the universal selector?
  16. What are the priorities among CSS selectors
  17. Why is nth-child selector not working?
  18. Default :target with CSS
  19. Can a ::before selector be used with a ?
  20. Avoiding repeated constants in CSS
  21. What is the ::content/::slotted pseudo-element and how does it work?
  22. How to run the CSS3 animation to the end if the selector is not matching anymore?
  23. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  24. Is there a css selector for selecting an element futherup in the html?
  25. How to get CSS to select ID that begins with a string (not in Javascript)?
  26. Selecting the last element among various nested containers
  27. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  28. Zebra striping a flexbox table with wrapping items
  29. How to select classes with spaces
  30. Targeting text nodes with CSS

Leave a Comment