Ruby on Rails - Override application.css

Question

I'm trying to override my application.css with other css, included in header. I want to customize my application.css by this way.

My header

= stylesheet_link_tag 'application', media: 'all'
= stylesheet_link_tag 'customized_css', media: 'all'

Actual

application.css.scss is overriding my tour.css.scss even its is loading before any other css

Edit

The order of files to override the style was right but application's selector specificity beats the tour's, so that's why. Solution - use ID instead.

Documentation

Specificity calculator

Thanks to @tonyedwardspz for the solution

Answer 1

The problem you're having is with CSS specificity.

You have declared the css files in the right order. However, the rule within tour.css.scss has a lower level of css specificity and therefore cannot override the declaration in application.css.scss.

To solve you can do one of three things:

• Rewrite the rule to have a higher speceficity. Applying a class to the element and combining that with the existing rule in tour.css.scss
• Rewrite the rule to match the selectors declared in application.css.scss. This will allow the cascade to work as you expect, but may affect other on page elements.
• Apply a class to the body tag that is specific to each page. You can then target your selections to only one page.

You can read more about css specificity here.