I have an odd situation which I'm trying to improve. I have HTML content that displays fine on my web page, but not on others. I define a style in my page, which I apply to the <img> tag to limit its width, and it works great.
What I would like, though, is to have inline CSS on my <img> tag that basically says "hey, if that style I specified doesn't exist, do this instead". Is there any way to do that?
(for those who are curious, this is for content that can be republished elsewhere, and I have no control over the CSS on the other pages)
Update
Perfect, the !important rule was exactly what I needed. Thanks to everyone who answered.
css:
img {
border: solid 2px red !important;
}
html:
<img style="border: solid 2px blue;">
the img border color will be red, unless the stylesheet is not present, when it will default to blue.
See example: http://jsfiddle.net/GyR6N/
In which case, set the default styles (on your stylesheet) to important, like so:
img {
border: 3px solid black !important;
}
And apply your custom inline styling:
<img src="foobar" style="border: 1px solid blue;">
Your stylesheet will override it, but since it won't exist on different websites, it would use the inline styling instead (unless of course, that site also happens to have an important rule overriding yours!)
What you could do is define the style you want to check in your CSS with an !important tag, then add inline styles on your image tag. If the style is available, the !important tag will override the image inline style.
img.red
{
background:red !important;
}
<img class="" style="background:blue;" src="" alt="" />
<img class="red" style="background:blue;" src="" alt="" />
Your page will use the blue background for the image unless the image has a 'red' class.
Related
my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css
Normal:
And after I opened the product description
Here is anchor style from developer tool
So I need any idea how to separete ebay product css with my css.
One of the methods that I think is to add !important to all my styles, but I don't think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.
Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this
.leftbar {
float: left;
width: 20%;
background: #ccc;
}
a { /*think of this as default link style*/
color: black;
}
#main div:not(.product-desc) a { /*more specific selector*/
display: block;
color: red;
}
a { /*this one is from eBay*/
color: green;
}
<div id='main'>
<div class='leftbar'>
<a>Hello</a>
<a>World</a>
</div>
<div class='product-desc'>
<a>Description</a>
<a>Product</a>
</div>
</div>
You can use a :not selector to define your main style so it won't be disrupted by the eBay style
The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black
create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.
Here how you do:
create the icons/text of anchor inside a element and give inline CSS
<a href="http://www.example.com" target="_blank">
<span style="color: #ffffff !important;" >icons</span>
</a>
A quick test in Chrome shows that the
a:visited * { ... !important}
does override the inline style, but adding the !important back to the span works fine.
<span style="color: #ffffff !important;" >
For understanding it better. Learn here Overwriting Hover in anchor
Overwriting visited in anchor
Blockquote
If you want to remove all exist style and reset it to default you can use:
all: initial;
Is there any way by which i can replace the image mentioned in SRC attribute of image tab using any of css trick ?
<img src = "setting-icon.png"></img>
i want to replace the setting-icon.png with css property, I am able to put another image in background with background-image property of image tag but i need to hid the one mentioned in src and show what the one i mention in background-image property in css.
Yes this is weird requirement but the thing is i am doing customization in a third party application where i only have control over css, I can not modify the HTML tags.
thanks for reading through !
You can use content:url("image.jpg")
https://developer.mozilla.org/en-US/docs/Web/CSS/content
In your CSS,
.img {
content:url("/new/image/source.png");
}
If you cannot modify HTML,
img {
content:url("/new/image/source.png");
}
In HTML,
<img class="img"/>
I have not try this yet, but I not sure if the inline attribute src will overweight the CSS content.
Update
It should work if you already have src for your img element. Thanks #pol
You can't change the html attributes values with CSS, only javascript.
But, with CSS you can "hide" the image and put a background in its place.
div img {
height: 0;
width: 0;
padding-top: 175px;
padding-left: 280px;
background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg");
}
<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg">
<div>Changed img:</div>
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>
Good question to learn about unnoticed selectors using CSS,
Additionally, You can read more about other selectors,
For example:
img: hover {}
and some other nice selectors for different range of elements
:active
:after
:before
:first-child
:first-letter
:first-line
:focus
:hover
:lang
:link
:visited
You can even conditionally select like this:
img[src="setting-icon.png"] {
border: 1px solid #000000;
content:url("/new/image/source.png");
}
Reference: W3.org - Advanced Selectors
Lets say I have a code something like
<input type='text' />
<br />
<iframe>
<input type='text'>
</iframe>
and a style
input[type='text'] {
border: 1px solid black;
}
and I wanted the styles to be applied only to elements outside the iframe. How would I be able to achieve it? I was actually looking at the css :not selector but I am confused on how I should use it. I'd like to achieve something like
input[type='text'], input:not(iframe) {
border: 1px solid black
}
or Apply styles to all input of type text BUT NOT to input of type text inside an iframe.
It's not possible to select elements outside some element with CSS.
You have to create a class with the desired style definition and apply it to all inputs individually.
The :not selector can be used to select ALL elements but the one specified as argument e.g: :not(p) will select all element from the page except paragraphs.
input[type="text"]{border: 1px solid #000}
iframe input[type="text"]{border: none}
It should work as listed. Iframes are isolated and should have their own styles, are you including the same style-sheet on both pages?
I'm trying to place a link in Wordpress quickly and we have a pretty complex style being applied to all a href links in the section. Here's a small sample of the selector and the styles within (there's about 40 lines of styles which I held back)
div.content-rotator li.featured-content a {
margin: 0px;
border: 1px solid rgb(34,56,19);
}
Is there anyway I can place a link in this li and override the parent style? It has to appear within the li with class featured-content.
I don't want to touch the existing CSS at this stage so I'd prefer to implement inline styles on the a element.
Thanks
EDIT: Just in case it wasn't clear, the CSS above is coming from the style sheet and I'd like to zero it out.
There's > 50 lines of styles in this though, I've only shown two for brevity so inline replacing them all isn't really an option.
Just use inline styles or/and add !important to overriden CSS definition, like:
<div class="content-rotator">
<ul>
<li class="featured-content">
...
</li>
</ul>
</div>
or
div.content-rotator li.featured-content a.other {
margin: 3px !important;
border: none !important;
}
Give the selected link an ID and just add !important to the styles. I don't think there is a better alternative unless you plan to go through the entire stylesheet.
Let's say I have the following:
<style>
.myLabel {
color: blue;
}
.myLabel:hover {
color:red;
}
</style>
<div>
<img src='myimage.png' />
<span class='myLabel'>Image Label</span>
</div>
Is it possible to replace the image (also via css) when they hover over the span? If so, how could I do that?
There don't seem to be any sibling selector for previous siblings.
W3 defined adjacent siblings and some browser support seems to be available for general siblings -- but, both are for following sibling(s).
So, I think you'll find it easier to accomplish with :hover set to the div.
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
<style>
.myLabel img { background-image: url('...'); }
.myLabel span { color: blue; }
.myLabel:hover img { background-image: url('...'); }
.myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
<img src='transparent.png' />
<span>Image Label</span>
</div>
An easier way to do this would be to remove the img element and make the image a background image on the span. Then you can control the background image in your two CSS rules:
.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }
Then you just need some CSS to position the background image, and probably to add enough padding for the background image to not overlap any text.
You could also put the image inside the span:
<div class='myLabel'>
<span>
<img src='transparent.png' />
Image Label
</span>
</div>
Then your css would be:
.myLabel span:hover img { ... }
FYI Only <a> tags work with :hover in IE6 (but it's old anyway)
No, you can not replace the value of the src-attribute in any way.
Jonathan Lanowski Said:
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
Keep the meaning of the IMG-element in mind. It's supposed to show an image as content, not presentation. If you put a transparent .gif or whatever in the src-attribute, you also remove content from the page.
The same applies to using different CSS-hover-techniques to change the image, you still remove the content as long as you don't have an actual image in the src-attribute. Plus, you won't be able to change the image while hovering the span-element as long as your document is marked up the way it is.
So then, this is a typical Javascript-job.
one technique is to have a single image file have multiple images in it and you use css rules to change the offset within the file to show.
see: http://www.alistapart.com/articles/sprites/
specifically the "Hovers" section.
They offer a functional example here:
http://www.alistapart.com/d/sprites/ala-image3.html
EDIT: I just realized that you asked to make the image change then the hover over the span not the image itself. To do that, I believe you would need to use javascript.