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

enter image description here

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

application.css has still higher priority, no matter on the order — jmeinlschmidt
– jmeinlschmidt, Commented Jun 20, 2015 at 13:29
Possibly. You've declared the stylesheets in the right order, tour.css should override. You could use an id to target that element to test the thory, It will override all other selectors. — tonyedwardspz
– tonyedwardspz, Commented Jun 20, 2015 at 15:09
I generally give my body tag a specific id and class, based on the controller and action, so I can write very specific css for a page if needed. Imho easier. And everything can be compiled into one application.css. — nathanvda
– nathanvda, Commented Jun 20, 2015 at 15:26

tonyedwardspz · Accepted Answer · 2015-06-20 15:28:17Z

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.

answered Jun 20, 2015 at 15:28

tonyedwardspz

1,9482 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ruby on Rails - Override application.css

Edit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related