Using “div” as a css selector

Question

I have a document structure that is similar across multiple pages.

HTML:

<ul>
    <li>
        <div>
            <img src=""/>
        </div>
    </li>
</ul>

Currently, there is a border around all img elements. The client would like me to remove the border from around the image, because not all images are the same size and they want a uniform look with the borders. I noticed that there was a div wrapping the images, but the div does not have an id or class. How can I select this div in my css?

Thanks

Answer 1

For instance using

ul>li>div {
    border: 1px solid blue;
    margin: 5px;
    padding: 5px;
}

From my point of view, this is the best way to avoid HTML manipulation.

However, if the structure ul>li>div is repeated elsewhere, this can be ambiguous.

Answer 2

给它一个类或ID ...然后为其创建CSS。

Answer 3

If there's no context anywhere , your recourse is to select it by the structure (as least specific as possible, if you like); for example,

li > div > img

But there usually is some kind of context. If your <li> had a class, for example, you could do:

li.contains-image > div > img

Or just

li.contains-image img

if there's no other image. Does it or one of its parents have a sibling that identifies it somehow? Use one of the sibling combinators!

li.before-the-one-that-contains-the-image + li img

Answer 4

In case you only have these set or cascade of element in the page you can use

<style>
ul li div {
    border: 1px solid red;
}
</style>

Otherwise this will add a border on all element matching on the page.

Best is to use an Id or a class on the element.