What is the priority of the asset pipeline's execution order?

What is the priority of asset pipeline?

I am trying to replace a part of ace.css style with user.css.scss.

The stylesheet file ace.css in the vendor folder should be overridden by user.css.scss.

However, it did not work as expected even when I included ace.css between user.css.scss, essentially importing user.css twice.

user.css.scss

div#user_bottom a.btn{
  color: red;
  background-color: #ffffff;
}

ace.css

.btn {
  display: inline-block;
  color: #FFF !important;
  background-image: none !important;
}    

layout file

I attempted to include user.css.scss TWICE.

Once before ace.css and once after ace.css.

= stylesheet_link_tag params[:controller]
%link{href: asset_path("ace-admin-theme/css/uncompressed/ace.css"), rel: "stylesheet"}/
= stylesheet_link_tag params[:controller]

The haml

%div#user_bottom
  %a.btn{class: "btn-#{button_color}",href: url }

result

user.css.scss is still being overridden by ace.css.

Answer №1

Having trouble organizing your files?

If you have an element

<div id="user_bottom"><a class="btn">A</a></div>

The more specific CSS selector will take precedence. Therefore, div#user_bottom a.btn will be applied before .btn as it is more "precise".

Update the first line of your ace.css with

.btn, div#user_bottom a.btn {

To be even more "precise", and make sure it comes after the initial rule.

http://www.w3.org/TR/CSS2/cascade.html explains

In order to determine the value for an element/property combination, user agents must follow this sorting process:

Identify all declarations that apply to the element and property in question, for the specified media type. Declarations apply if the corresponding selector matches the element and the target medium aligns with the media list on all @media rules containing the declaration and on all links leading to the style sheet. Sort based on importance (normal or important) and origin (author, user, or user agent). In ascending order of priority:

  • User agent declarations

  • User normal declarations

  • Author normal declarations

  • Author important declarations

  • User important declarations

Arrange rules with equal importance and origin by specificity of selector: more specific selectors override more general ones. Pseudo-elements and pseudo-classes are considered like regular elements and classes, respectively.

Ultimately, arrange by order specified: when two declarations have the same weight, origin, and specificity, the latter one listed takes precedence. Declarations from imported style sheets are deemed before any declarations within the style sheet itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

The functionality of Vue.js Stylus and scoped CSS appears to be malfunctioning

I am currently utilizing stylus and scoped CSS styles with Vuetify. Despite trying to use deep nested selectors such as ::v-deep or >>&, I have not been successful in getting them to work (even after rebuilding the project due to issues with hot relo ...

Adjusting the repeating-linear-gradient CSS background

My goal is to make adjustments to a specific CSS code, in this case it is the repeating-linear-gradient. Take a look at my current implementation: input[type="range"]::-moz-range-track { background: repeating-linear-gradient(to right, #ccc, # ...

Ensure that columns are neatly arranged horizontally when they do not all fit in one row

I currently have a row with 6 columns, but when they can't fit next to each other on the screen, 2 of them get pushed below, resulting in a messy layout. I could use a media query to solve this issue, however, I am curious if there is a better way to ...

Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...

The visible overflow-x property is failing to display the excess content within the unordered list

Imagine having a complex bootstrap dropdown menu with over 100 li items. Each time you hover over an li, a new dropdown opens next to it. The problem arises when trying to make the list scrollable by setting max-height:300px; overflow-y:scroll; overflow-x ...

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

I am currently in the process of developing a star rating system within Wordpress and am looking to store the rating data in the Wordpress database. To achieve this, I have saved the star rating PHP code as a template within my Wordpress theme folder. Belo ...

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

What is the best way to implement a CSS Style specifically for a glyphicon icon when it is in keyboard focus?

I have a particular icon representing a checkbox that appears as a glyphicon-star. It is designed to display in yellow when focused on by the keyboard navigation. This feature is intended to help users easily identify their location on a page. However, an ...

Why isn't my HTML list showing up on Firefox mobile browsers?

I am using jQuery mobile version 1.4.2. Here is the code snippet from my page. HTML <ul data-role="listview" class="ui-nodisc-icon ui-alt-icon"> <li><a href="#" >Real Estate in San Jose</a></li> </ul> CSS .ui-list ...

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

I have been utilizing a similar solution found at http://jsfiddle.net/cSSUA/209/ to add tooltips to disabled buttons. However, I am encountering an issue specifically in Internet Explorer (IE11). The workaround involves wrapping the button within a span: ...

What's up with the Twitter Bootstrap parameters?

As a beginner in the world of HTML5 and Twitter Bootstrap, I have been exploring some pre-built examples and now have a few questions... Consider this code snippet from the Fluid Layout Example: <div class="navbar navbar-fixed-top"> <div class ...

"Ensuring a DIV element has a height of 100% within

Is there a way to set and enforce a div's height to be 100% of the browser window, another div, or a table cell without resorting to complicated hacks found on Stack Overflow or other websites? ...

Emphasizing sections using a specific class for paragraph highlighting

Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or &ap ...

"Create a div element with resizable capabilities, similar to a

Is it possible to resize elements like divs in browsers without using jQuery or other libraries like draggable or resizable? I know text-areas can be resized by default, but I'm curious if this functionality can be extended to other elements through p ...

Managing the clearance of an absolutely positioned div with CSS

I'm encountering an issue where my page contains divs that are 250px x 250px and positioned absolutely. When one of these divs is opened, an ajax call expands the div to display all its contents. These divs have a maximum width of 600px but can vary i ...

Steps for Deactivating HTML Links

I am facing an issue with a link button inside a <td> that needs to be disabled. It is working fine on Internet Explorer but not functioning properly in Firefox and Chrome. I have tried various methods, but nothing seems to work on Firefox (using ve ...