Develop Reference

How can I dynamically style programmatically generated SVG?

I am using a js library (mermaid) to generate svg on a web page. I need to dynamically apply styling to parts of the svg as the user activates various commands using keyboard shortcuts, Particularly, I need to highlight the element in the svg that is currently designated as the selected one in the logical model. Looking at other questions on dynamically styling svg deal with inlined static svg, so they probably don't apply to my case and none of the methods I tried so far have worked.
The style I am trying to apply is
border-radius : 2rem; box-shadow : 0 0 3rem red;
when applied to regular html, this gives the element a glowing red border.
First thing I've tried was to include this as a class in a element in like this :
<style>
.highlight {
border-radius : 2rem;
box-shadow : 0 0 3rem red;
}
</style>
Adding the class to a regular html element 's class list like an , , or , would produce the desired styling. However when I would programmatically get a element and add the class to its class list, then it would remain without the glowing border. Inspecting the svg using chrome developer tools revealed that the relevant class has been added to the element's class list. Using the same method was successful for regular html. For reference here is the method I used to add the class:
graphicDiv.querySelector(selector).classList.add('highlight')
This having failed, I thought maybe the svg had some styling inside its internal element that overrode my styling, so I added !important to my styles so they would have highest precedence. This still failed to work, so next I tried to set the style property for the element, which should have the highest precedence like this:
graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')
This still failed to produce any difference in the styling of the svg. Inspecting the element in chrome dev tools revealed the style attribute was indeed set.
I also tried adding my style definition to the svg's own element, by getting it after the svg is generated, and appending my class style definition to its text content. It would still not work.
Finally, I thought those css properties might not be supported by , so I changed them to background-color: green; instead, since I think I saw in an article on styling svg with css that this css prop was used on an . This didn't work. I tried applying to a element in the svg. Didn't work either.
I am completely baffled why none of this is working. I would massively appreciate if anyone could help me understand how I could dynamically change the styling of svg elements!

While normal CSS attributes can be given to SVG elements, most do nothing as SVG elements by definition adhere to a different set of styling rules.
A simple example is that in normal CSS you might set left: 25px but for SVG you would need to set x: 25.
For the styling you want, border radius is usually achieved with stroke-width. For background colour just use fill. As for a shadow, it may be a little more complex but you should have a look at feDropShadow.
Besides that, applying those styles with css rules should be roughly the same.
I hope that's at least some help.

Cannot style Jquery element using CSS

I have a Jquery selectmenu called #Main which implicitly gets a #Main-button. When I try to set #Main-button's width using css as
#Main-button {
width:200px;
}
it has no effect.
When I explicitly set
$( "#Main" ).selectmenu({ width:200})
it has the desired effect and under Firebug I see that it has appended a style="width:200" on the #Main-button, which is what I tried using CSS at the first place.
What is different? I've checked that the my CSS style sheet gets called AFTER the Jquery one, so there is no precedence issue
Also I notice that html elements turned to Jquery elements cannot be styled using CSS targeted at the specific element, even with the use of unique id's,but require the use of Jquery classes like .ui-menu etc
why do they behave differently? are there any specific styling gudilines when Jquery is involved?

In your CSS you've
#Main-button {
width:200px;
}
but the JS is adding dynamic inline style based on content. So it's having style attribute.
So in terms of CSS specificity their CSS beats you.
You must use !important in your rule to avoid overriding of your CSS.
#Main-button {
width:200px !important;
}

To style selectmenu or every jquery widget, you need to use jquery default classes. Your selector must be like
#Main-button.ui-selectmenu-menu li a
And also you can extend _renderItem and _renderMenu functions of selectmenu for different styling.

Responsive image in CMS

I have problem with CMS. I need to change css that the page could be responsive.
One of the div has data-height, data-weight and height, width in style in html that it looks like that
div class="classOf" id="idOf" data-width="755" data-height="125" style="width: 755px; height: 125px;"
I can't use my new css due to is not working if I select this id and change properties.
This is CMS so I can only console to append new css and js.
My question is how to neutralize this set properties on html and apply css with max-width:100%
that will work ?

Try to include your own customized css at the end of the html document, it will override any existing css file included before.

In your css add !important to the width attribute, it should over-ride the inline style.
Example:
.classOf{
width: 100% !important;
}

Can I prevent a CSS style to be overwritten?

I'd like to apply a CSS to some linkbuttons on page load but one of them <a id="lb1">logoff</a> must keep its style, no hover nor other event must change its style.
The linkbuttons have no class and the css applied to all of them is done to tags, this way:
a
{
//style
}
a:hover
{
// style
}
Is it possible?

No, you can't.
You can use more specific selectors (or even inline CSS with the style attribute) so that they are less likely to be overridden accidentally.
You can use the (eugh) sledgehammer of !important so they will only be overridden by another !important rule.
There is no way to prevent them being overridden though.

Please please please please please avoid using !important whenever possible. You will run into SO many annoying problems and issues from using this. I consider it a very lazy hack.
What you want to do is append a class to the link that you don't want overwritten. Classes are given a higher priority than general selectors (such a, p, b). So if you append this class to the link, the CSS will override the default CSS you have set for a.
CSS:
a {
color: red;
}
a:hover {
color: blue;
}
.derp:hover { /*you can add everything you want to preserve here, essentially make it the same as the link css. you can also change it to #lbl:hover, although there's no good reason to be using an ID as a CSS selector*/
color: red;
}
HTML:
this will turn blue on hover
<a class="derp" href="#">this will stay red on hover</a>
Here's a fiddle to show you. The second link has a class appended that preserves the original style: http://jsfiddle.net/p6QWq/

Why not add a class to all the link buttons you want to change, and not add it to the one you don't want to change.
Then you can call:
$(".myClass").css("backgound-color", "blue");
This would change the background color for every element with a class of myClass to a blue background.
Or you could add a whole new class to the link buttons that have a class of myClass:
$(".myClass").addClass("myExtraClass");
This would then make the class attribute of your link button class="myclass myExtraClass"

Seeing your code posted makes it a little more clear on what you want to do. Try this:
a {
text-decoration: none;
color: orange;
}
a:hover {
text-decoration: underline;
color: blue;
}
This would apply a default style to all <a> elements. Now you could overwrite this default style by providing a specific style for the anchor with the id you gave above:
#lb1 {
color: black;
text-decoration: none;
}
#lb1:hover {
color: black;
text-decoration: none;
}
I mocked this up in a quick and dirty jsFiddle. See if this gives you the desired result. IDs take precedence over classes and default element styling. So if you have one that you want to keep the same, apply and ID and style the particular element accordingly. This would also help you by preventing you from having to apply a class to several elements. It's less coding to apply one ID than to apply twelve classes. (Just an exaggerated example. I don't know how many links you have.)
Hope this helps.

css is cascading by definition, so any style you apply to a tags will apply to this specific one, except if you overwrite it.
You'll have to either assign a class to all the other buttons or overwrite all the default properties for this specific button.
Also, do not forget the pseudo-classes :visited and :active.

You should use !important in your css like :
a {
/* style */
background: #FFF !important;
}
a:hover {
/* style */
background: #FFF !important;
}

You could always overwrite your css by simply creating another stylesheet and place it at the END of your stylesheet links in the head of your html.
<head>
<link rel="stylesheet" href="location/location/first_stylesheet.css">
<link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>
This is not the most productive method of overwriting your css however; one would be well advised to eliminate the necessity for this separate stylesheet by simply appending elements with a class attribute. The class attr will allow you to modify basic html elements, tags and overlay a final layer to "rule them all". Enjoy!

conflict between the same class or id of multiple css files

Is there any way to stop the conflict between same class or id of multiple css files. As I am explaining below for better understanding:
There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files. Let's suppose if any class of master page has the same name to reloaded elements' class while properties are different. Then how should I handle this to stop the conflict.
master.html
<html>
<head> //attached master.css file here </head>
<body>
<div class="myClass"> </div>
<div class="dynamic"> /* often reload elements by ajax */ </div>
</body>
</html>
master.css
.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }
now i am showing the reloaded html elements & css files into dynamic div of master page
reloaded tag line by ajax : <div class"myClass"> </div>
reload.css
.myClass{height: 30px; width: 25px; background: yellow; }
Now as you can see there are two classes with same name but different properties. Then how should I stop the confliction?
#Edit Thanks everyone for your support & time but my problem is different here.
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server.
so whatever the contents loads in dynamic div, it's coming from client side (e.g. tag lines & css, js). in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn().

You could apply the cascading rules of the CSS:
In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.
you adjust the reload.css rules to
.dynamic .myClass{height: 30px; width: 25px; background: yellow; }
The cascading rules which are applied when determine which rules should apply to html div could be referenced here
Updated 11.23
As the OP only have control over master.css, the above solution won't work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:
body > .myClass {...}
This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.

Option 1: A more specific selector
.dynamic .myClass { }
This selector selects the .myClass element that is a descendent of .dynamic.
.dynamic > .myClass { }
This selector selects the .myClass element that is a direct child of .dynamic.
Option 2: Inline CSS
<div class="dynamic">
<div class="myClass" style="background-color: yellow;"></div>
</div>
Option 3: Use a different class.
UPDATE
If you want to avoid the previous defined property to be overwritten by a later defined value, you can use the !important syntax.
.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */
If I understand your question correctly, this should sort it.
So you should add !important to the properties that seem to be overwritten.

div.myclass { ble ble }
div.main div.myclass { ble ble }
<body>
<div class="myclass"></div>
<div class="main><div class="myclass"></div></div>
</body>

Whichever css class of the same name is loaded last will overwrite anything set by the earlier class. However, if you use an inline style attribute this will always take precedence over anything set by the css file (so using an inline style is one option).
You could also use different style names or clarify your style with tag names div.myClass or id's #myDiv.myClass.