css Question posted in
Some basic documentation can be found here.

How to ignore a particular line of CSS on a child, based on the parent?

Let’s say I have the following parent classes: .TestPageA, .TestPageB, .TestPageC.

My question is, how can I ignore the padding padding: 50px 0 44px 0; under subComponent just for .TestPageB class. So if it’s .TestPageA or .TestPageC it can have the padding: 50px 0 44px 0; . But if it’s .TestPageB, then the padding will be padding: 40px 0 40px 0; .

How can I set up my CSS properly for these types of scenario? Do I need to create a whole separate CSS block just for .TestPageB to add it’s padding? Or is there a way to do it all in one block?

.TestPageA, .TestPageB, .TestPageC{
    .TopSection, .BottomSection {

        .subComponent {
            padding: 50px 0 44px 0;

            
            .leftSide {
                padding: 0;

                .title {
                    width: 100%;
                    float: left;
                    padding-bottom: 20px;

                    h2, h3 {
                        .borderBottom {
                            border-bottom: solid 1px #fff;
                            width: 100%;
                        }              
                    }

                    h2.page {
                        margin: -6px 0 4px 0;
                    }

                    svg, h2, h3 {
                        float: left;
                    }
                }

            }          
        }

    }

}
Tags:

3

Answers


  1. 0

    You can use it separately by removing the padding from the subcomponent and declaring some new custom CSS rules for the classes that you have

    .TestPageA .subComponent,
.TestPageC .subComponent {
    padding: 50px 0 44px 0;
}

.TestPageB .subComponent {
    padding: 40px 0 40px 0;
}
    Login or Signup to reply.
  2. 0

    Just override the padding for the TestPageB, like this:

    .TestPageA, .TestPageB, .TestPageC{
    .TopSection, .BottomSection {

        .subComponent {
            padding: 50px 0 44px 0;

            &:is(.TestPageB *) {
               padding: 44px 0 40px 0;
            }
            
            .leftSide {
                padding: 0;

                .title {
                    width: 100%;
                    float: left;
                    padding-bottom: 20px;

                    h2, h3 {
                        .borderBottom {
                            border-bottom: solid 1px #fff;
                            width: 100%;
                        }              
                    }

                    h2.page {
                        margin: -6px 0 4px 0;
                    }

                    svg, h2, h3 {
                        float: left;
                    }
                }

            }          
        }

    }

}
    Login or Signup to reply.
  3. 0

    What you could do is to utilize :not() and :is() pseudo classes:

    .TestPageA, .TestPageB, .TestPageC{
    .TopSection, .BottomSection {
        .subComponent {
            /* not a descendant of .TestPageB */
            &:not(.TestPageB *) {
                padding: 50px 0 44px 0;
            }
        }
    }
}

    Here’s a live example:

    .ParentA, .ParentB, .ParentC {
  p {
    .highlight {
      font-weight: bold;
    
      &:not(.ParentB *) {
        color: blue;
      }
      
      &:is(.ParentB *) {
        color: red;
      }
    }
  }
}
    <div class="ParentA">
  <p>A <span class="highlight">highlight</span> A</p>
</div>

<div class="ParentB">
  <p>B <span class="highlight">highlight</span> B</p>
</div>

<div class="ParentC">
  <p>C <span class="highlight">highlight</span> C</p>
</div>

    FYI CSS nesting is already supported by native CSS for the majority of mordern browsers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search