How can I override a parent class on one element only using CSS?

Question

I am trying to override the padding set in 'class=image' (set in a parent div) however target this override using a class set in the 7th child of that parent div using CSS only. Can I do this by changing the parent class for it to target only that 7th nested Childs class?

<div class="image hero header">
    <div class="umb">
     <div class="grid">
      <div class="container">
       <div class="clearfix">
        <div class="col-sm-12">
         <div class="hero-2020">
          <div class="override 2020-image post">
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>

Here's the CSS for all 6 previous classes:

<style>
  .image{
   width: 100%;
   height: 100%;
   padding: 1.5em 0 6em 0;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
   background-position-x: 50%;}

  .override{
   padding: 0px !important;}
  
  .image.umb{
  margin: auto;
  top: 1em;
  height: 50%;
  width: 1005;}

  div .grid{
  display: block;}

  .container{
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;}

  .clearfix{
  margin: 0px;
  zoom: 1;}

  .col-sm-12{
  width: 100%;}

 .hero-2020{
 padding-left: 0px !important;
 padding-right: 0px !important;}

</style>

I have tried to use the CSS nth child concept without much luck. So I'm hoping I can use something a little more specific when writing out the element in CSS, for example > override.image{styles} ? Thanks.

you are using nth child wrong - nth child is for the nth direct child of the parent not nested child also css only flows down so you cannot affect the parent class based on it's child — Pete, Nov 18 '20 at 11:31
Thanks Pete, it was a bit of a long shot however I can't access the HTML or JS. Using a nested child class to override the parent class is what I'm looking to do yes — gilesj, Nov 18 '20 at 11:40
ok doke. Is there a way I can change the 'parent' class to only target that 'image' class? for example> .parent.image{} ? — gilesj, Nov 18 '20 at 11:44
put a space in between the first class and the second class - `.parent .image {}` - with the space it means `.image` is inside `.parent`. without the space, it means an element with both image and parent classes — Pete, Nov 18 '20 at 11:44
Thanks @Pete , this doesn't seem to work for some bizarre reason, maybe I'm doing something wrong my end. Maybe because there are a few more classes being set in the same element (please see above), so will I have to specify .image.hero.header .override.2020.post ? — gilesj, Nov 18 '20 at 11:52

score 0 · Answer 1 · answered Nov 18 '20 at 11:22

0

Try with this if you want all children with .override class having padding 0:

div.image div.override{padding: 0}

Read this: https://www.w3schools.com/cssref/css_selectors.asp

In particular:

.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1

I suggest to use !important only when is strictly necessary.

answered Nov 18 '20 at 11:22

kiafiore

161
2
13

Thanks kiafiore, this doesn't seem to work but will take a look at the link :) – gilesj Nov 18 '20 at 11:40
@gilesj Sorry I've read only now that you want to change parent from child... Unfortunately you can't :( – kiafiore Nov 18 '20 at 11:49
My bad @kiafiore I just need to change the class used in the parent to only affect that child one.. – gilesj Nov 18 '20 at 11:52
So you need to change only the padding on the 7th child div or the parent one? Sorry but today I'm a little bit out of the world :D Can you also share all the styles of the other css classes? So we can better help you – kiafiore Nov 18 '20 at 11:56
yes only on the 7th child div, however the .image class is affecting it. Thanks, I've just updated the styles.. – gilesj Nov 18 '20 at 12:17
@gilesj Thanks. And what about the other 5 parent divs? Do they have css classes? – kiafiore Nov 18 '20 at 15:09
yes, I've added them just now, please see above :) thanks. – gilesj Nov 18 '20 at 15:25
Sorry but, can you also modify the code snippet with the html tags? In this way we can see the correct stylization of all the divs. Ty – kiafiore Nov 18 '20 at 15:29
no problem, HTML's all updated, hope this helps? – gilesj Nov 18 '20 at 15:39
just as an FYI, it's the padding (1.5em 0 6em 0) in .image I'm trying to override. I could easily target that .image class and put it at the end of the stylesheet however I want it to affect not all .image classes but the ones which have a nested child (in this case the 'override' class) ? thanks – gilesj Nov 18 '20 at 15:50
Thanks for your clarifications. I'm afraid but I think the only way to do what you want is using javascript. Watch this, pheraps can help you: [link](https://stackoverflow.com/questions/37861853/jquery-if-child-has-class-add-class-css-to-parent) – kiafiore Nov 18 '20 at 16:47
ah what a shame! Thanks for your help :D – gilesj Nov 19 '20 at 08:39

How can I override a parent class on one element only using CSS?

1 Answers1