Css Priority
See original GitHub issueHey,
currently the generated stylesheet
is inserted as the first child of head
, however shouldn’t it be inserted as the last child?
For example, if we have different stylesheets already loaded like bootstrap in the head
. Then the generated stylesheet
would still be the first child in the head and based on the precedence of css, bootstrap would override blazorstyled
, if both wanted to change the style of the same element.
Maybe i overlooked something in the documentation, so is there a possibility to move the generated stylesheet
to the bottom of the head
so that it has a higher precedence?
https://css-tricks.com/precedence-css-order-css-matters/
Thanks!
Issue Analytics
- State:
- Created 3 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
CSS Specificity
Think of specificity as a score/rank that determines which style declaration is ultimately applied to an element. Look at the following examples: Example...
Read more >Specificity - CSS: Cascading Style Sheets - MDN Web Docs
Specificity is an algorithm that calculates the weight that is applied to a given CSS declaration. The weight is determined by the number...
Read more >Importance of CSS Specificity and its best practices
1) Inline style: Inline style has highest priority among all. 2) Id Selector: It has second highest priority. 3) Classes, pseudo-classes and ...
Read more >CSS Priority - Free tutorial to learn HTML and CSS
An HTML element can be targeted by multiple CSS rules. Let's use a simple paragraph for example ... This is what CSS priority...
Read more >CSS Precedence
The specificity of a CSS rule depends on its selector. The more specific the CSS selector is, the higher is the precedence of...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks @pgrm for the idea! I will document as soon as I fix #102
but you are setting found to true, once you’ve found a “matching” element:
https://github.com/chanan/BlazorStyled/blob/30b23f61e8510f9b3af2e47bf9525c271f6d4939/src/BlazorStyled/Internal/Scripts.js#L168
and the condition for a “matching” element is simply
https://github.com/chanan/BlazorStyled/blob/30b23f61e8510f9b3af2e47bf9525c271f6d4939/src/BlazorStyled/Internal/Scripts.js#L164-L167
this can be faked for any element, if you know the attribute name.
As a matter of fact, I’ve just tried it out and I was able to change the default location for the BlazorStyled element to any place I wanted, just by defining an
<style data-blazorstyled-priority="-1"></style>
in my head.Try it out for yourself, if you don’t believe me. But I think this is the perfect solution to this problem.