I want to style and centre some pics that do not have any classes, only titles and some inline CSS styling already.
Is this possible to style this pic (make it 100% width) via a stylesheet using CSS only. Can CSS attributes whilst keeping the inline CSS in the HTML?
<img alt="My Third pic" src="http://www.example.com/thirdproduct" style="border-style:solid; border-width:10px; height:240px; width:220px" title="Third Pic">
How do I target an image by using the title, this is what I have so far
img [title~="Third Pic"] {
width:100%
}
If I understand correctly, you just need to get rid of the tilde (~) and the space between img and [title, as well as making the rule !important so it'll override the inline style
img[title="Third Pic"] {
width: 100% !important;
}
you can add this CSS to style the images based on the img tag
.parentDiv img{
width:100%;
}
or if you need the third img to have the style
.parentDiv img:nth-child(3){
width:100%;
}
Related
I can't seem to make a CSS listen to a :hover.
I have the following CSS:
<style>
.hidescroll
{
}
.hidescroll :hover
{
overflow-x: auto;
}
</style>
And html:
<div class="hidescroll" style="width:100%; height:100px; background-color:green; overflow-y:hidden; overflow-x:hidden;">
<div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>
I would expect the scrollbar to appear when I hover over the div. It doesn't. Why? (I tried to add div before :hover but that didn't help either.)
Inline styles have a higher specificity. You either have to say !important on the hover declaration or move your styles away from inline. I'd recommend the latter.
style="..." on the <div class="hidescroll" takes precedence over the separate css rule in the <style> block.
Since you already have a css rule for hidescroll, put those styles in there instead of putting them inline.
<style>
.hidescroll
{
width:100%;
height:100px;
background-color:green;
overflow-y:hidden;
overflow-x:hidden;
}
.hidescroll:hover
{
overflow-x: auto;
}
</style>
<div class="hidescroll">
<div style="width:300%; height:100px; background-color:red;">abc</div>
</div>
It would be better to also put the styles for the inner div into a style rule.
Note — !important was meant to be used the user agents; used by the end-user to be able to override site styles, for example I use it to in my browser (with the Stylebot plugin) to fix font-size and contrast problems to make sites readable)
I want to select all img tags inside a div, so that a common CSS can be applied to it.
I don't know the level to which img tag can be for example
<div class="my_div">
<div>
<p>
<img src="x"/>
</p>
<img src="y"/>
<p>
<a>
<img src="z"/>
</a>
</p>
</div>
</div>
And this structure can change as it is dynamic in nature only constant is top div my_div. I want to apply css on all img as:
{
max-width:100% !important;
}
Any ideas how can it be achieved?
try this
.my_div img
{
max-width:100%;
}
if this doesn't applies then use !important like this
.my_div img
{
max-width:100% !important;
}
if you want to add CSS for all img then you can use
img{max-width:100% !important;}
and if you want to target an img inside of a div so you can just add class name before the img tag
.my_div img{max-width:100% !important;}
try this
.my_div div img
{
max-width:100% !important;
}
This should do the trick for you:
div.my_div img
{
//CSS goes here
// Like - width:300px;
}
This ensure that it is applied to "all the images" in the Div having class "my_div"
for CSS in angular component:
:host ::ng-deep .mydiv img {
background-color: blue;
}
for CSS in index page:
body ::ng-deep .mydiv img{
background-color: green;
}
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
I am trying to get multiple effects on a single image hover to allow the best outcome with the least code possible. Note: I do not want jquery at all! CSS only (even 3).
So I have an image which will change on hover and at the same time cause a Div below the said image to change the background image as well (which is actually text, I just couldn't find a way to change the text so I tried the image) and with it all having the hover image on the IMG tag to have a link to the place I want.
So far I managed to get the image changed and the links working on the hover image with this:
CSS
.container
{
width: 1500px;
height: 400px;
}
.image a:hover .container
{
background-image: url('logo-tp-text.png');
}
HTML
<div class="image">
<a href="http://www.google.com">
<img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>
<div class="container"></div>
Now, as you much more experienced people than me can see, I have the image on IMG tag self onmouseovered and out to try and avoid complications on the CSS, which worked: it changes into the image I need (LOGO-FB) and reverts to LOGO-TP onmouseout, with the link working. However, it is not changing the .container background as expected on hover on the IMG tag (which is the A tag reference)
So, waiting for the beating: what am I doing wrong? Using FF 32 browser.
Css does not contains parent navigation selectors... Only descendant and following sibilings.
Since the .container div is a sibiling to the .image div, you could set the :hover pseudo to the div instead to the anchor:
.image:hover ~ .container {
background-image: url('logo-tp-text.png');
}
As ~ is a general sibiling selector.
More info here: MDN General sibiling selector
Also
If the html markup stays the same as you showed, I mean, if the .container remains as a immediate followed sibiling to the .image div, you can also use an Adjacent Sibiling Selector
.image:hover + .container {
background-image: url('logo-tp-text.png');
}
With the example below, I need to add padding and background-color properties to the text anchor. I then need to exclude padding and background-color from anchors that contain images.
<p>
this is a text link that needs to be styled
<img src="image/name.jpg" alt="this needs to be excluded from styling" />
</p>
If I have a red background and padding on my text links, I do not want that same red background and padding to appear on my linked images. The images will always be in their own anchors, not mixed with text within the same anchor.
The rub is that I can not add classes or IDs to the img tags - I do not have edit control of that data.
So how can I add CSS attributes to all anchors, while excluding anchors that contain images?
Using JQuery:
$(function() {
$('a:not(:has(img))').css('background','red');
});
Currently, you cannot select the parent of a matched child selector. You'll have to use javascript to accomplish this.
That being said, if your page background is solid, you could use negative margins and a background on your img tags to overlay your a background… Here's the example. I have not tested on all browsers, but it seems to work for me in Safari, Firefox, and MSIE8.
a {
display: inline;
padding:10px;
background:red;
}
a img {
border: none;
vertical-align: bottom;
margin:-10px;
padding: 0px;
background:white;
}