Different style sheets for different parent pages - javascript

I am struggling with tweaking my Angular JS application.
There is the whole application where in the end I'd like to use my app.css file as a style sheet. So each state like:
domain/#/articles
domain/#/articles/1
domain/#/users
domain/#/users/1
will use this file.
However I do have a cms section in my application (i.e. domain/#/cms/articles and I'd like to use completely different styles there (nothing in common with app.css). Is there anything I could do to easily load cms.css for selected states and do NOT load app.css there?
My initial idea was to add two style sheets in my index.html file with either ng-if or ng-show for each but that's definitely not a good approach (most likely it wouldn't even work).

What about assigning a top-level class to each page, and then nesting the styles that are unique to that page within it? This is made even simpler if you're using a CSS preprocessor like LESS or SASS.
For example, you'd have something like this:
<div class='main-page' ng-controller='main'>
<p>Some text</p>
<p>Some more text</p>
</div>
<div class='cms-page' ng-controller='cms'>
<p>Some CMS text</p>
<p>Some more CMS text</p>
</div>
And then in your CSS:
.main-page {
//main styles here
background-color: black;
p {
color: white;
}
}
.cms-page {
//cms styles here
background-color: red;
p {
color: blue;
}
}
Extrapolate that idea as needed, but now you don't need to worry about reusing class names or having styles on one page conflict with styles on another, as everything is nested safely in its page class.
For global styles, of course, you just leave them out of the top-level page classes.

Related

Change background color of every other row

I'm trying to replicate the default settings of ag-grid which paints every other rows background in a slightly different color. But when I try to reorder columns clicking on headerColumn the background colors doesn't reorder.
This is my current approach that isn´t working
cellStyle(params) {
let backgroundColor = #FFFFFF;
if (params.node.rowIndex % 2 === 1) backgroundColor = #E04F00;
}
https://plnkr.co/edit/bHLEmECLNby3obIT, this example shows the desired behavior.
Is there a way to acces and change those default colors?
I found out that the default themes of ag-grid already did what I wanted, the thing is that the theme I'm using has two colors that are very similar, what I really needed was to change that default color.
I was able to achieve that by overriding theme's variable
.ag-theme-balham {
--ag-odd-row-background-color: #E04F00;
}
.ag-theme-balham .ag-row-odd {
background-color: var(--ag-odd-row-background-color);
}
I followed their documentation, first here https://www.ag-grid.com/javascript-grid-styling/, that took me to https://github.com/ag-grid/ag-grid-customise-theme, where I discovered which variable I should edit.
Checking the working example you are showing here, each .ag-row div has an additional class .ag-row-odd or .ag-row-even. So basically those classes mimic the behavior you could achieve by using .ag-row:nth-child(odd) and .ag-row:nth-child(even).
What might be happening in this case is that when you reorder the .ag-row elements the classes are not being updated, instead just moved around. What that would represent is something like this:
<!-- Default //-->
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<!-- Sorted //-->
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
So in this case what I would recommend is either to change the styles to:
.ag-row:nth-child(odd) {
background-color: #fcfcfc;
}
.ag-row:nth-child(even) {
background-color: #ffffff;
}
If that's not an option than you should review the script that reorders the .ag-row elements as it's probably not changing the classes accordingly.
UPDATE
I think I found your issue. I checked this example
And while inspecting elements I saw that when you reorder, each row has these two attributes.
<div row-index="3" aria-rowindex="7"></div>
From what I was able to determine even if you change your sort parameters, those two attributes don't actually change. So if you base your row styles on them, like you do with the row-index parameter, you'll never get a correct order, because sometimes you get:
<div row-index="3" aria-rowindex="7"></div>
<div row-index="5" aria-rowindex="9"></div>
<div row-index="7" aria-rowindex="11"></div>
As this is not incorrect, the styles are applied, but not in the order you would prefer. The script is doing its job as intended, it's just that your condition for the colors is not working.
The solution to this I think would be 100% css and for you to remove the cellStyle definition, because I think the problem lies there.
CSS is going to be the easiest solution to this. I don't see your html, but essentially you will want to reference the html table's rows, and then add a css nth-child(even) and nth-child(odd) to them. Here is an example:
p:nth-child(odd)
{
background: #ccc;
}
p:nth-child(even)
{
background: #fff;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
And here are some more examples from w3:
Depending on what your specific code looks like, there may be different ways of doing this. I noticed you have js in your question, but since there was the css tag, I gave a css answer.

Can elements be styled with external CSS

An external CSS file is applied globally to the referencing HTML page. Is it possible to limit the scope.
I am aware that I can do .myCssClass etc but for this project, I'm going to need 2 very different styles in one page. Consider 2 divs, where one uses CSS stylesheet 1 and the other uses stylesheet 2 (and there will also be the orthodox CSS for the site).
The style sheets will also be used else where, so I can't edit the CSS. It would be idea to share the external CSS by element. Something like
<div stylesheet="../style.css">content 1</div>
<div stylesheet="../style2.css">content 2</div>
Is this possible?
You can use scoped attribute, but unfortunately it is supported only by Firefox. So, the ids and classes is the best, accepted, approved and common solution.
<div>
<style scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>Heading</h1>
<p>hello world! I'm of blue color!</p>
</div>
<p>I'm out of the scope, so I'm of the black color :(</p>
You must have then 2 different classes for them, one class from style.css and other from style2.css, as they'll overwrite one over the other if you only use the 'div' selector, if you can choose a specific class from each style.css, I think that would be wiser than complicating your life, or try the solution that Paweł posted
As far I know isn't possibile, but you can create "zones" using CSS selectors, in example, take a look here:
<div class="content">
<div class="myElement">
</div>
</div>
<div class="footer">
<div class="myElement"></div>
</div>
with this selector in css:
.content .myElement{
height:50px;
width:50px;
background-color:blue;
}
only the div with "myElement" class wrapped in the div with the "content" class will be affected by this rule.
here's a fiddle showing this case:
https://jsfiddle.net/fn7ohw75/

How do I toggle view/display of custom HTML elements?

thank you for taking the time to review my question! :-) I am attempting to write better, cleaner, more maintainable HTML using custom HTML elements as opposed to the traditional 'div' methods. I have a very simple example that works using a div and a class on it to map my link to the div that I want to show/hide and this does work. I include this as a working example of the kind of functionality I am trying to produce:
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: block; }
.unhidden { visibility: visible; }
</style>
<script type="text/javascript">
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML</h3>
</div>
</body>
</html>
However, I am trying to provide this kind of functionality with multiple links to multiple sets/subsets of text, I have tried the following but am obviously doing something silly as I can't get it to work:
<html>
<head>
<script type="text/javascript">
function toggle_view_node(nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
</script>
</head>
<body>
<p>
This test shows or hides Topic 1 custom element, (or at least attempts to
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element, (or at least attempts to
</p>
Topic 2
<p>
<p>
This test shows or hides the Intro custom element, (or at least attempts to
</p>
Introduction
<p>
This test shows or hides the Detail custom element, (or at least attempts to
</p>
Detail
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> though generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro in itself.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
Please, can someone help me figure out what I am doing wrong. I really want to produce the aforementioned functionality with a simple bit of CSS or JS that is as dynamic as possible. Ideally I wont need to specify specific (especially repeated code for each topic or HTML tag that I want the ability to show/hide via a button/link. Obviously, I will probably have to set a few default assignments, maybe turning detail off by default, but if I can avoid required extra repetitive code for each "context" I wish to flip that would be amazing!!!
Any pointers in any direction that can help me achieve what I am attempting without having to use jQuery or a verbose library over and above JS and CSS would really make my day!
Many thanks in advance and apologies if I am doing something really stupid, I haven't done that much work with custom elements and so probably am.
Kind regards,
James
** Latest Attempt **
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: inline; }
.unhidden { visibility: visible; }
<!-- Playing with something like this, ideally I would -->
<!-- configure the show/hide state of my custom HTML tags -->
<!-- universally in a similar way? -->
Topic1.hide { display: none; }
Topic2.hide { display: none; }
Topic3.hide { display: none; }
Intro.hide { display: none; }
Detail.hide { display: none; }
<!-- Another attempt to configure switch state but does not work either -->
Topic1 { className: unhidden; }
Topic2 { className: unhidden; }
Topic3 { className: unhidden; }
Intro { className: unhidden; }
Detail { className: unhidden; }
</style>
<script type="text/javascript">
// This works, but is not clean
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// I am now attempting to use this on 'Topic1' as per the suggestion
// in the comments of this post, for some reason it does not work, wondering if
// I need to do a .forEach to parse the set of nodeID's of the 'Topic1' in this
// example, but if working whatever HTML tag name that I want to toggle in or
// out of view
function toggle_view_node_id(nodeID) {
var item = document.getElementById(nodeID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// This does not work but I have left to show what I tried that did not work
function toggle_view_node(nodeID) {
if (nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test that works using extra layer of div with mapped class
<p>
This test shows or hides Topic 1 custom element,
(or at least attempts using the suggestion in this post
comments to try to make work without inline JS and call a
function to do it as with my working example, unfortunatly
however, this still does not seem to work :(
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element,
(or at least attempts to using existing method that doesn't work
</p>
Topic 2
<p>When I have it working I hope to be able to have: </p>Topic 3
<p>And... </p>Intro
<p>And this... </p>Detail
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML into view using a div and associated class of hidden, can I not do this on a custom element?</h3>
</div>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro without.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
you don't need a .unhidden class, only a .hidden class. It looks like:
.hidden{
display:none;
}
simply use classList like classList.toggle("hidden") or .add or .remove.

apply colour change to only some tags

If I am using a <h3> tag and apply css
h3 {
color:White;
}
changes the colour of all the header 3 text to white colour.
I only want to apply this to certain <h3> tags though among my many.
How can I do this please?
Give them a class:
.white-header {
color: white;
}
And in your html:
<h3 class='white-header'>I m white</h3>
JsFiddle
You can use a common class on them and use css for that.
I only want to apply this to certain tags though among my many.
Then you target parent element and apply css for that like below:
<h3>heading</h3>
<div class="foo">
<h3>some heading</h3>
<p>some paragraph</p>
</div>
h3{
color: red;
}
.foo h3{/*applied for some heading*/
color: white;
}
CSS is the way to go, but since the question is tagged javascript here is a JS solution using querySelector() to style select <h3> tags:
document.querySelector("div.someClass h3").style.color = "#FFF";
Edit: #Kitler just edited out the javascript tag from the question. This answer is for the original question. If the OP leaves it off, then I will quietly delete this. Hold off before downvoting.

Use a new CSS file to override current website's

My website has currently 3 CSS files that are automatically included as a part of the website and I do not have access to the source i.e. index.html of the website but I do have access to the CSS files of my website.
I am trying to use my own style to override my websites CSS files and create a new CSS file that would contain all the styling that I would like to overwrite on my website.
I have tried using #import url(css4.css) and I have placed that at the top of my last CSS file but that wouldn't overwrite the last CSS file's styling.
How can I achieve this?
<link rel="stylesheet" type="text/css" href="currentCSS1.css">
<link rel="stylesheet" type="text/css" href="currentCSS2.css">
<link rel="stylesheet" type="text/css" href="currentCSS3.css">
<!-- How to add this below just by using CSS? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css">
Besides using !important that most answers are advising you to use, this is a matter of CSS specificity
The concept
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
How is it calculated?
The specificity is calculated on the concatenation of the count of
each selectors type. It is a weight that is applied to the
corresponding matching expression.
In case of specificity equality, the latest declaration found in the CSS is applied to the element.
Some rules of thumb
Never use !important on site-wide css.
Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
Never use !important when you're writing a plugin/mashup.
Always look for a way to use specificity before even considering !important
can be represented by 4 columns of priority:
inline = 1|0|0|0
id = 0|1|0|0
class = 0|0|1|0
element = 0|0|0|1
Left to right, the highest number takes priority.
Here is a snippet with a Full example of a CSS specificity
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY: 0/1/0/0 */
#id {
background-color: green
}
/* SPECIFICITY: 0/0/1/0 */
.class {
background-color: yellow
}
/* SPECIFICITY: 0/0/0/1 */
section {
background-color: blue
}
/* ------------ override inline styles ----------- */
/*to override inline styles we now use !important */
/* SPECIFICITY 0/0/1/0 */
.inline {
background-color: purple !IMPORTANT /*going to be purple - final result */
}
<article>
<div id="id">
<div class="class">
<section>
<div class="inline" style="background-color:red">
<!--SPECIFICITY 1/0/0/0 - overridden by "!important -->
</div>
</section>
</div>
</div>
</article>
Now here is the Full snippet step by step
ID: GREEN
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/1/0/0 */
#id {
background-color: green
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
CLASS: YELLOW
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/1/0 */
.class {
background-color: yellow
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
ELEMENT: BLUE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/0/1 */
section {
background-color: blue
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
INLINE STYLE: RED
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
OVERRIDDEN INLINE STYLE: PURPLE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 1/0/0/1 */
section > div {
background-color: purple !IMPORTANT
}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
You can calculate the specificity of your element(s) here
Note:
A must read on this subject
Inheritance and cascade
CSS Specificity
Specifics on CSS Specificity
Here's a fun solution no one has mentioned.
Facts:
You cannot modify the HTML of the page at all - no problem!
You can modify the CSS files, but the developers may modify them
again later and remove any changes you made - not a worry.
You cannot/do not want to use Javascript and JQuery - fine by me.
You can add more files on to the server - Excellent!
Let's do some .htacess hacking for fun and profit!
Document root .htaccess file:
Options +FollowSymlinks
RewriteEngine on
RewriteBase /
RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]
Result: hackedCSS3.php is silently served instead of css3.css on every request.
REF: http://httpd.apache.org/docs/2.2/howto/htaccess.html
hackedCSS3.php file:
<?php
// Send the right header information!
header("Content-type: text/css; charset: UTF-8");
// Output the css3.css file
echo file_get_contents("css3.css");
?>
// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }
Bonus:
You could expand this solution to include all three .css files in this one .php file (but only serve, say, css3.css and send the css1.css and css2.css to a black hole with .htaccess), and use clever regular expressions to remove/modify those developer's CSS without touching any of their files. The possibilities are tantalizing.
Addendum:
Can you be a bit more specific on where to include these files?
The .htaccess file should be in the document root directory of the website. This is where www.example.com/index.html would load index.html
Should the hackedCSS3.php file be in the same directory as the other
css files?
It can be in any directory you specify in the .htaccess file. The document root is fine. Change
RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]
to
RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php$2 [L]
Should our css content (where you specified // Add your CSS here...)
should be within html style tags?
No. Treat your CSS code in that section as if it were a .css file. You do not need <style> tags.
To use CSS only, the best way would to use Chrome or FireFox's developer tools and find the various style you want to overwrite.
The for each of the style you find that need adjusting then use the !important modifier.
.newClass {
color:red !important;
}
Another way would be to write unique css class names and again use !important if you need. The real trick here is in specificity. If an identifier is more specific the rule will be applied.
6.4.1 Cascading order
6.4.1.4
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
<a class="my-most-awesome-link its-really-cool">Most awesome link</a>
.my-most-awesome-link.its-really-cool {
text-decoration:none !important;
color:red !important;
}
If you are desperate you could use javascript to remove the unwanted css.
See this JSBin for a working example.
I found this interesting technique
<script>
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement);
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild()
}
}
}
removejscssfile("css1.css", "css") ;
removejscssfile("css2.css", "css") ;
removejscssfile("css3.css", "css") ;
</script>
In your new CSS file, add !important to the block of code, for instance:
if you have this on css1.css:
h2{
color:#000;
}
In css4.css put the same element, but with !important, as follows;
h2{
color:#ccc !important;
}
Therefor, !important will force that this style will be by all means the style set for the element to which it's applied.
Use #import url('css4.css') in one of your existing css page. Then use specificity to be highlighted your new code as bellow:
Html :
<ul class='ulclass'>
<li class='liclass'>
<a class='aclass>The text</a>
</li>
</ul>
css1.css :
.aclass{
color : red;
}
css4.css :
ul.ulclass li.liclass a.aclass{
color: green;
}
Then you will have green color in your a element
write a new css, and use id of elements rather than class. Also use !important in css.
An alternative: Rely on the cascade, instead of specificity
A number of solutions here recommend using #import to include your css4.css file and then modifying the selectors therein to have a greater specificity or to use the !important declaration, but there is yet another way.
Paste the entire contents of css4.css at the end of css3.css. In this way, you need not rely on !important or specificity, because the cascading inheritance will adopt your rules at the end of the file if they are of equal specificity.
With this method, you are sacrificing modularity for easier implementation.
Example of pasting, relying on cascade:
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}
/* Pasted contents of css4.css */
.mycooldiv {
color: lime;
}
<div class="mycooldiv">Hello World</div>
However, it would be easy enough to create greater specificity by simply prepending html to the beginning of every rule in css4.css, if you don't want to paste it at the end of css3.css. This is preferred to adding !important where it works.
Example of importing, relying on greater specificity:
/* #import of css4.css with greater specificity */
html .mycooldiv {
color: lime;
}
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}
<div class="mycooldiv">Hello World</div>
I think I have an answer. The way that I have tried to achieve this is:
1) Say my css3 is the last CSS in the list and I have all my changes in css4. I have made a copy of css3 and called it "css3-Original.css" and added my css4 in the same folder. I then created another css file called "css3.css" (because that is the last one it takes from the list) and added imports of my Original css3 first and then my overriding css4.css file as given below:
css3.css (The new one)
#import url("css3-Original.css")
#import url("css4.css")
This is the best way I found it to work. This way although I know that my css3.css file will change on updates but I know how I can replace it very easily and quickly. I have used !important in my css4.css wherever necessary (if required) but basically because its the last css file, it uses that styling as compared to any previous ones (unless they are !important).
Thanks for the suggestions guys. I finally managed to come to a solution.
If I understand you're question correctly, adding #import url(css4.css) to the top of css3.css does import your stylesheet into css3.css. But your styles are being overridden by the styles in css3.css. This is because of Cascading Order and Specificity. In order for your css4.css styles to be used, your selectors must have a higher specificity than the selector in css.3.css you are trying to override.
Example: <h1> tags will be colored red.
body h1 { //this is more specific
color: blue;
}
h1 { //this is less specific
color: red;
}
But since you're #import url(css4.css) line of code will get removed every time the developers update the css3.css file this is not a "bullet-proof solution"
Do you have the ability to add any javascript to the site? If so you could use the following solution
jQuery
$('head').append('<link rel="stylesheet" type="text/css" href="css4.css">');
Javascript
var head = document.head
, link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = 'css4.css'
head.appendChild(link)
Source: https://stackoverflow.com/a/11833777/2687861
Unfortunately, I have to agree with phari.
Quote:
1) You cannot modify the HTML of the page at all, and therefore cannot include another CSS file. 2) You can modify the CSS files, but the developers may modify them again later and remove any changes you made. Hence you cannot permanently modify the CSS files. 3) You cannot/do not want to use Javascript and JQuery). If all of these things are true, there is no solution to your problem.
Commented by phari on Mar 26 at 14:29
Let me break it down. I will try my best to explain why there's no solution (correct me if I am wrong at any of these options);
Option1: Using jQuery or Javascript.
You cannot modify the HTML of the page at all!! You do not want to use jquery nor javascript.
This means that all answers to your question mentioned on this page which involves jquery or javascript are disregarded. This does not mean the answers given on this page are wrong. In your case it's not possible.
Option2: #import url(css4.css);
Your website has 3 css files that are automatically included as a part of the website, but unfortunately, you DO NOT have access to ANY of these css files. You can not place this piece of code in css3.css, or any of these files.
You can modify the CSS files, but the developers may modify them again later and remove any changes you made, which means #import url(css4.css); can also be removed.
Also using #import url(css4.css); would be completely useless. You'll have to place #import url(css4.css); at the end of css3.css, but this won't work because #import rules must always be first in a document. If I am not mistaking ilia (who commented on Mar 23 at 9:42) meant the code can be place anywhere in the file. #import url(css4.css); must be at the top. The link ilia provided as "prove" also specify that it's a requirement to place it at the beginning.. Check the two links below.
More Info visit http://webdesign.about.com/cs/css/qt/tipcssatimport.htm or https://developer.mozilla.org/en/docs/Web/CSS/#import#Specifications.
Option 2 is disregarded too.
I don't think there could be another way to do what you want to do.
Hence, there is no solution to your problem.
For duplicate CSS definitions, the last definition will have precedence.
If the added css4.css file is actually referenced after the "3 css files that are automatically included", then the css4.css file's definitions should override the prior duplicate definitions from these other files.
If you are not seeing the results that you expect, use the "view source" option of your browser to confirm the sequence in which the CSS files are referenced. Also use the "Developer tools" of the Chrome browser or the "Firebug" add-on for the Firefox browser to find out how the browser is interpreting the CSS definitions to yield a result that you did not expect. These tools should provide insight to your problem.
You can just overwrite the text in the css file available to you, the style which you want from previous css file you can copy that code in the you can add with that new code refresh your website the result you need appears

Categories

Resources