I have multiple css files like bootstrap, normalize and custom.
When I try to change the background image by jquery, it inserts the css value in bootstrap.css rather than my custom css.
Is there any way to select a specific file where jquery can make changes?
My css load order is:
1 bootstrap.css
2 normalize.css
3 my own custon css
Thanks
Styles added with jQuery will be inline. This will take a higher precedence than any external stylesheets.
It sounds like you probably have the CSS loading in the right order. What should happen is the browser will apply styles from Bootstrap, then apply Normalize, then apply your custom styles, then any inline styles.
Related
Can I convert bootstrap classes to pure css?
Something like convert 'class="container-sm' to normal css.
I would like to know the CSS that contains the "container-sm" class in bootstrap
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
Bootstrap classes are CSS so there is nothing to convert.
My best guess is that you want to see the actual CSS rules of each class to understand what they do.
If that is the case, you can just right click and inspect the element you want. You will see a pane with all the css rules applied to the element you want to see.
I'm trying react-sticky-table third party library. It is not accepted CSS or styles. but some styling or CSS elements work react-sticky-table. it is not accepting the styling fully
I want to fully access the CSS and styling properties and elements in react-sticky-table.
So how to solve it?
If you have any other solution, please refer to it here.
package link:
https://www.npmjs.com/package/react-sticky-table
demo link
https://henrybuilt.github.io/react-sticky-table/?path=/story/basic--basic
I faced CSS or SASS styling is not working in react sticky table. Actually react sticky table works perfectly. If you using css / sass modules in your react app, you need to access global style of react stick table.
How to access global style? you may use :global pseudo selector, You will be achieved the global styles in css / sass module.
If you use normal css / sass (without module) , you don't need to specify the :global pseudo-selector. Because normal css / sass is global style.
Otherwise we can achieve inline css styles
I need to dynamically style the draftjs editor container (basically I need to dynamically apply font sizes to the container, as the font sizes are in percentages). Normally, dynamic styling in react is done by applying styles to the component, but for draftJS, styling the component itself doesn't work and you need to use css to style the .DraftEditor-editorContainerclass.
Is it possible to dynamically style the .DraftEditor-editorContainer while adhering to React principles? I could easily do the dynamic styling with jQuery, but from what I understand this is a horrible practice and should never be done. Is there no other way?
Just wondering which of these methods of styling has the priority while styling html:
Using CSS:
div{background-color:yellow}
Using style attribute:
<div style="background-color:red"></div>
Using script:
document.getElementsByTagName("div")[0].style.backgroundColor="green";
The last example will win, because it's the same thing as your second example (both are inline style properties), but happens later, overwriting red with green.
In general, it's (in descending order of priority):
Inline style properties with the !important flag
CSS properties with the !important flag
Inline style properties without the !important flag
CSS properties without the !important flag
...where within the "CSS properties" area there's the entire realm of specificity.
The priority is exactly opposite your list.
Linked CSS-stylesheets are overridden by inline-styles, and JS-added rules will override both linked and inline styles. They are actually overwritten in the moment - not stored, but on load / when the JS is run, it will overwrite current styles for the remainder of the session (or longer, depending on how the JS is set up).
The css belongs to the css files, so using CSS is the normally the best option.It's better because is more readable, and its better organized than putting it directly in the html or via javascript.
One important thing to be aware of, is the CSS Specifity. That means, different methods of writing CSS have different priority when the browser have to apply the styles. Check this link for the documentation about CSS Specifity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it helps
In a website, I have a header and footer that comes from another website.
Those header and footers came with javascript and add lots of CSS files (CSS files used from another website) ... and the main website too!
Those CSS are like battle themselves and the rendreing of the header and footer are like mixed styles because of mixing CSS rules from all css files...
How Can I remove all the CSS rules (main.css) on the two part of the main website and just apply the "headerAndFooter.css" on those two parts?
The every part havs his proper div.
Thanks in advance
You should create a new class for your headers and footers in a separate CSS file - and enter the needed styles there. That way, they won't conflict with the rest of your site - and you won't compromise the rest of your site's layout by modifying global CSS.
Of course, without seeing any of your code, it's hard to provide a detailed answer, but in cases like this, more accurate class names are a good starting point.
You can use !important at the end of the value of the property you are trying to change, if you have several rules overwriting each other.
For example: the blue color would show, not the red, because you labeled the blue as important.
body {
color:red;
}
body {
color:blue !important;
}
A better solution would be to just erase the rules that you don't need from the different css files.
I finally download the incoming CSS and prefix them by #header and #footer. Than I ahave full control of all CSS because I use it locally.