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

 .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 >
            <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 ">"?

CodePudding user response：

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

CodePudding user response：

You can target them with

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