How to apply style to specific element inside div and list?

[Adrek]

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:

Code Select Expand


<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:

Code Select Expand

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.

[MrPhil]

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).

[Mr. Pedram]

Try this:

Code Select Expand

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:

Code Select Expand

<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:

Code Select Expand

.example img {
  width: 25px;
}


[MrPhil]

if you can add class to div, do it.

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.