CSS override rules and specificity

by

To give the second rule higher specificity you can always use parts of the first rule. In this case I would add table.rule1 trfrom rule one and add it to rule two.

table.rule1 tr td {
    background-color: #ff0000;
}

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

After a while I find this gets natural, but I know some people disagree. For those people I would suggest looking into LESS or SASS.

More Related Contents:

  1. How long can a background-image be?
  2. Two divs side by side – Fluid display [duplicate]
  3. Expand a div to fill the remaining width
  4. How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
  5. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  6. Margin-Top push outer div down
  7. Vertical Text Direction
  8. Can I use div as a direct child of UL?
  9. Add centered text to the middle of a horizontal rule [duplicate]
  10. Make wrapper take maximum width of child image? [duplicate]
  11. How can I display just a portion of an image in HTML/CSS?
  12. text-overflow is not working when using display:flex
  13. Center aligning a fixed position div
  14. CSS Float: Floating an image to the left of the text
  15. Why would margin not be contained by parent element?
  16. Height percentage not working in CSS
  17. My @media queries aren’t working on mobile devices
  18. Why does CSS padding increase size of element?
  19. Use Fieldset Legend with bootstrap
  20. CSS I want a div to be on top of everything
  21. How can I wrap text around a non rectangular image?
  22. Link a .css file in another folder
  23. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  24. Why are some of my CSS rules not working?
  25. How to “crop” a rectangular image into a square with CSS?
  26. Can I put a … tag within the body of a HTML file to send in email?
  27. CSS Cell Margin
  28. How might I force a floating DIV to match the height of another floating DIV?
  29. Best Way to do Columns in HTML/CSS
  30. Table with table-layout: fixed; and how to make one column wider

Leave a Comment