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

Question

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

Navigation

#1 by (0 votes)

2

I have a Wordpress website. In theme, I need to customize the height of a single div of class image_wrapper , but when I make the change, this reflects in the other divs of the same class scattered around the theme.

How can I set height in this case, without the other divs suffering the change?

The% w / w 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 above CSS, other% of the same class of% are changed, like the following:

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

How can it be solved? I could not use the specificity in this case.

html css

asked by anonymous 13.12.2017 / 23:57

1 answer

View Thumbnails SIGEP - Unauthorized service

score 0 · Accepted Answer

If you have access to the code of this div , you can add another class of your own. In this case, it will only be changed maintaining 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>