CODEWITHSUNDEEP
htmlcss
Allan T
Allan T

Reputation: 33

How to target the certain divs within divs in html/css

 .right-slide > div > div {
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center center;
    height: 100%;
    width: 100%;
    transition: transform .5s ease-in-out;
}

.right-slide > div > div:hover {
    transform: scale(1.5);
    transition: all .3s ease-in-out;
}

<div class="right-slide">
            <div style="background-color: #773f47bd">
                <div style="background-image: url(/pic1.jpg);"></div>
            </div>
            <div style="background-color: #773f47bd">
                <div style="background-image: url(/pic2.jpg);"></div>
            </div>
            <div style="background-color: #773f47bd">
                <div style="background-image: url(/pic3.jpg);"></div>
            </div>
            <div style="background-color: #773f47bd">
                <div style="background-image: url(/pic4.jpg);"></div>
            </div>
            <div style="background-color: #773f47bd">
                <div style="background-image: url(/pic5.jpg);"></div>
            </div>
        </div>

I am trying to target the divs with background-image, but I am unsure of how to do that. How do I select only those divs that I want? Does it work with my method of using two ">"?

Upvotes: 0

Views: 40

Answers (2)

Kinglish
Kinglish

Reputation: 23664

You can target them with

.right-slide div[style*=background-image]{
   <!-- CSS -->
}

Upvotes: 1

oreopot
oreopot

Reputation: 3450

How about you try the following css selector:

div[style^="background-image: url"]

Moreover, the following MDN docs would help you.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Upvotes: 1

Related Questions