I have an anchor tag which has a style with !important, cant remove this !important from the css because its a default style.
I am trying to add my custom style and I should not use the !important. Is there a better way to achieve this with out important.
Here it is what I have tried:
HTML:
<body class="imp" id="Imp">
<a class="anchor" href="#">Change background</a>
</body>
CSS:
a {
background: black !important;
color: white;
}
body .anchor{
background: blue;
}
Fiddle Demo
The only way to override an !important css property is to use !important yourself. No way around it with pure css, unfortunately:
body .anchor{
background: blue !important;
}
Is there some specific reason that you don't want to use it?
If you absolutely must not use an !important markup, an alternative is to "cheat" in a rather ugly way with a wrapper around the <a> content:
<body class="imp" id="Imp">
<a class="anchor" href="#"><span style="background:blue;">Change background</span></a>
</body>
Try this way
<a class="anchor" style=" background: blue!important;" href="#">Change background</a>
In jQuery
$("a.anchor").attr('style', 'background: blue !important;');
DEMO
Try with Jquery
$("a.anchor").attr('style', 'background: blue !important;');
DEMO
Related
CSS ::after has a nice feature in combination with content and attr(), that lets you insert any attr value as the pseudo-element content.
For general debugging purposes, I'm looking to append a little yellow label to all HTML elements with the content as name of the element.
I can do ids and classes with CSS.
But for elements (p div span etc) javascript is the only option?
Yes you have to use javascript or jQuery that makes it much easier : DEMO
HTML test
<div>
</div>
<p></p>
<form></form>
<span></span>
CSS test
[data-tag]:before {content:attr(data-tag);}
jQuery
$("body").children().each(function() {
var domel= $(this).get(0);
$(this).attr("data-tag",domel.nodeName);
})
it produces this :
<div data-tag="DIV"></div>
jQuery can select all elements of a certain type/tag, I'd recommend using that.
If I understand correctly you want to do the following and you do not need javascript.
http://jsbin.com/wepayija/3/edit
<style>
p::after {
background-color: yellow;
content: 'p'
}
.my-class::after {
background-color: green;
content: 'p'
}
div:after {
background-color: yellow;
content: 'div'
}
</style>
<p>I have no class</p>
<p class="my-class">I have a class</p>
<div></div>
I need a way to get certain CSS attributes for all HTML elements in a page and make them inline. I have a with custom CSS attributes, for example:
<style type="text/css">
h2 { color: red; }
</style>
And then:
<h2>This is my title</h2>
So, I need a script that will make the following change (and only the following):
<h2 style="color: red;">This is my title</h2>
Any thoughts?
Basics of CSS:
This will make all h2 tags have a text color of red
<style type="text/css">
h2 { color: red; }
</style>
<h2>I'm red</h2>
<h2>I'm also red</h2>
<h1>I'm not red</h1>
This will make all tags with the class of chicken be red.
<style type="text/css">
.chicken { color: red; } /* chicken is the class name*/
</style>
<h2 class = "chicken">I'm red</h2>
<div class = "chicken">I'm also red</div>
<h2>I'm not red</h2>
If you only want to give one tag a specific property you give it an id
<style type="text/css">
#chicken { color: red; }
</style>
<h2 id= "chicken">I'm red</h2>
I don't really understand what you're looking form, but the property for making something inline is:
display:inline
http://www.w3schools.com/cssref/pr_class_display.asp
If you replace the color:red with display:inline then their properties will change from being red to inline.
If you only want to do it for h2 elements and for CSS color attribute then the following should work
$('h2').each(function(){
$(this).css('color', $(this).css('color'));
});
If you want other elements/attributes then you will need to build it out.
I'm not quite sure what you mean by "get certain CSS attributes for all HTML elements in a page and make them inline." What are you trying to do?
For individual inline styling, use the span tag:
My mummy has <span style="color:blue">blue</span> eyes.
To style certain elements, as the user above has done with jQuery, use a class tag for each element that you wish to style:
CSS:
.specialStyle {color: #00d;}
HTML:
<div id="anyOldDiv" class="specialStyle">...</div>
click here
I have this
<span class="ui-icon ui-icon-info" id="icon" runat="server" ></span>
I dont use onclick but my icon is clickable (maybe because the jquery-ui class...)
I need to disable the onclick completely.
Is there a way to do it?
You can try:
jQuery off() to off the onclick event for specific span.
Use:
jQuery( "span#icon" ).off("click");
Check w3schools tutorial for this
Or, You can try:
jQuery( "span#icon" ).css("cursor","default");
I guess the clicking on the span does not fire any event if not specified, means this is more a design issue
If there is a hand-cursor coming up as soon as you hover you can spcecify this by the cursor attribute in css:
.someclass {
cursor: default
}
Another possibility if there is some event fireing as seen here:
Use CSS to make a span not clickable
<span class='unclickable' onclick='return false;'>description<br></span>
i am new in stackoverflow. i am trying to add my code here but i am failed for that reason i just added picture here with my Html code
and script are
For a clickable span:
html:
<span class="clickable-span">View</span>
css:
.clickable-span {
color: darkcyan;
text-decoration-line: underline;
}
.clickable-span:hover {
cursor: pointer;
}
For a Unclickable span:
html:
<span class="unclickable-span">View</span>
css:
.unclickable-span{
color: cyan;
cursor: default;
}
I'm using custom scrollbar, add one scrollbar is very easy, but if I want to add second they twice use one mCustomScrollbar.css I don't know how to change that second div. I was looking on code on demo custom scrollbar but this just fail.
JQUERY
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
});
})(jQuery);
HTML
<link href="scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="suwak"> content with first scrollbar </div>
<div class="suwak2"> content with second scrollbar </div>
Some simply CSS
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
Just add another class on div with class="suwak", this will run your scrollbar and your second class will help override your first class. In css you are saying, if something has both classes, use new style. In css your selector would be .suwak.suwak2, no space between classes in css.
<div class="suwak"> content with first scrollbar </div>
<div class="suwak suwak2"> content with second scrollbar </div>
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
.suwak.suwak2 {
/*new stile*/
}
Why don't you use second class as well? is it something that you don't know how many DIVs will be there to have same scrollbar?
If it is limited to 2 only, then try
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
$(".suwak2").mCustomScrollbar();
});
})(jQuery);
Or you can mention same class for second DIV as well. I have suggested this as per my observation of the code you posted.
Is it possible to change the background color of a div using css?
Code so far:
CSS
.div{
background-color: #000;
}
.live .div:not{
background-color: #ddd;
}
Javascript
function change(){
$("body").addClass("live");
}
HTML
<div onclick="change()">change</div>
<div>...</div>
Everyone seems to be confused about what you're trying to accomplish. #fedxc probably has the right solution. But if you're trying to change the color only of the div that was clicked, this will do it:
HTML:
<body>
<div>
Change this div!
</div>
</body>
CSS:
div{
background-color: #000;
color: white;
}
div.live{
background-color: #ccc;
}
Javascript:
$("div").click(function(){
$(this).addClass('live');
});
Live example here: http://jsfiddle.net/7rbdg/1/
Use the following:
.div{
background-color: #000;
}
.live .div:not{
background-color: #ddd;
}
Also, are you going to use <div class="div">...</div> somewhere in your code?
Looks good what you're doing, just make sure to use background-color. I made a thing that does that with a random color, if it helps. http://gascalculator.ca/randomcolor
I used pure javascript though, I'm not familiar with jquery
If I understood correctly what you want to do is change the body background color when you click the DIV.
Since you are using jQuery I would trigger the background color change with a .click() function on the DIV.
HTML
<body>
<div class="div">
Change my world!
</div>
</body>
CSS
.div{
background-color: #000;
color: white;
}
JavaScript
$(".div").click(function(){
$("body").css("background-color", "#ddd");
});
Here is a live example.