How to specify a CSS property in a single element for a repeating class?

Asked

Viewed 124 times

2

I have a Wordpress site. In the theme, I need to customize the height of a single div class image_wrapper, but when I make the change, it reflects on the other divs of the same class spread by the theme.

How can I define the height in this case, without the other divs undergo the change?

To div that I need to customize is contained in this other:

<div class="image_frame scale-with-grid product-loop-thumb">
    <div class="image_wrapper">
        <a href=""></a>
    </div>
</div>

div.image_wrapper {
  height: 192px; }

When I use the CSS above, others divs of the same class are amended as follows::

<div class="image_wrapper"><img class="scale-with-grid" src="" alt=""></div>

How can it be solved? I couldn’t use specificity in this case.

html css

  • You can change that specific div?

  • You will have to create a single selector for this element. If you have any parent element that defines a id will make it a lot easier. You can use the browser inspector to assist you in this process: press the right mouse button on the desired element and go to "Inspect Element", make sure the correct element is properly selected by the inspector and see the entire selector in the bar below. But if you edit HTML things get a lot easier.

  • Thank you very much!

1 answer

0


If you have access to this code div, can add another class of its own to it. In this case, only it will be changed keeping the style that has already been defined in .image_wrapper:

div.image_wrapper.outraclasse {
  height: 192px;
}

<div class="image_wrapper outraclasse"><img class="scale-with-grid" src="" alt=""></div>

Example:

div.image_wrapper.outraclasse {
  height: 192px;
}

.image_wrapper{
   display: block; width: 400px; height: 20px; background: red; margin: 5px 0
}
<div class="image_wrapper"><img class="scale-with-grid" src="" alt="">
   Esta div é igual as outras
</div>
<div class="image_wrapper outraclasse"><img class="scale-with-grid" src="" alt="">
   Esta div é igual as outras mas tem uma alteração na altura
</div>
<div class="image_wrapper"><img class="scale-with-grid" src="" alt="">
   Esta div é igual as outras
</div>

  • I located the DIV in question and added another class to the image_wrapper class, as explained. Thank you very much, solved!

  • @Fernando I am glad to have helped. Consider marking in response. Abs!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.