Hey, I was trying to add some styles to images (width and height), but as it turned out that I have to specifically target this element.
Here is example HTML part:
<div>
<ul>
<li>
<a href="" >
<img src="" class="img" />
</a>
</li>
<li>
<a href="" >
<img src="" class="img" />
</a>
</li>
</ul>
</div>
So I would want to add style for image with class="img". After searching research I tried something like this:
div > ul > li > a > img.img{height: 10px !important; width: 10px !important;}
but unfortunately this doesn't work for me. Is there any way to do this?
Note: HTML code cannot be modified.
The first thing I'd check is whether your selectors are working, but the properties within the { } are bogus. Try
color: red; or something simple like that (no "!important" modifiers). If that doesn't work, then it must be the selectors. I did a little reading on it, and in one article it was claimed that sometimes browsers will
insert an element that you're not expecting. For example, a <tbody> slipped between a <table> and a <tr>. If you look at the page using a debugger such as Firebug (for Firefox), you might spot an unexpected tag. Unfortunately, that may be browser-dependent (you might need to have several versions of your resulting CSS).
Try this:
div img {
width: 10px;
heigh: 10px;
}
here:
http://codepen.io/Pedram/pen/JDfjc
if you can add class to div, do it.
for e.g:
<div class="example">
<ul>
<li>
<a href="" >
<img src="" class="img" />
</a>
</li>
<li>
<a href="" >
<img src="" class="img" />
</a>
</li>
</ul>
</div>
CSS:
.example img {
width: 25px;
}
Quote from: Mr. Pedram on March 12, 2013, 05:52:53 AM
if you can add class to div, do it.
Quote from: phantomm on January 29, 2013, 11:22:16 AM
Note: HTML code cannot be modified.
As I said before, the first thing to do is to get the selectors working properly before trying to get fancy in the attributes. If
img.img alone catches too many elements (other images you didn't want affected), you'll have to use either descendants or direct descendants ( > ) to get more specific. Use just enough to narrow down the selection to the img elements you want -- no need to get the full chain of elements.