CODEWITHSUNDEEP
htmlcss
user2815795
user2815795

Reputation: 1

Using "div" as a css selector

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

Upvotes: 0

Views: 339

Answers (4)

Sunil Verma
Sunil Verma

Reputation: 2500

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.

Upvotes: 0

Ry-
Ry-

Reputation: 224904

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

Upvotes: 1

opalenzuela
opalenzuela

Reputation: 3171

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.

Upvotes: 7

Ruddy
Ruddy

Reputation: 9923

Give it a class or ID... Then make the CSS for it.

Upvotes: 1

Related Questions