Question 335905 in CSS Question posted in
Some basic documentation can be found here.

How to apply CSS to only a particular class while the class shares other CSS code, with another class?

For example here’s the HTML code:

<div class="topSection">
    <div class="middleSection">
        <p>This is some text in a paragraph.</p>
    </div>
    <div class="lowerSection">
        <p>This is some text in a paragraph.</p>
    </div>
</div>

Here is the CSS

.topSection{
    .middleSection, .lowerSection{
        padding: 20px;
        font-size: 20px
        p{
            background-color: lightgrey;
        }
    }
}

With the way this CSS is structured, I was wondering if I want to apply the p tag style to ONLY for the middleSection class, but not for the lowerSection class, how would I do that?

I was thinking to do something like this by using the :not() but this did not work:

.topSection{
    .middleSection, .lowerSection{
        padding: 20px;
        font-size: 20px
        p:not(.lowerSection){
            background-color: lightgrey;
        }
    }
}

Or is the only way to do it is by creating separate CSS code for middleSection and then apply the p tag styles to it? To me this seems like extra bit of code, to address a small issue. Is there a shorter way to address this case?

Tags:

3

Answers


  1. 0

    It seems like a simple problem, but the scope of some styles is one of the most difficult things in CSS. It’s a chronic problem, and finally we have some tools to solve it. I know there’s a lot of code here, but like I said, it’s not a simple problem. Maybe you can get some inspiration from these solutions.

    You can use the:has pseudo-class selector to separate styles of p elements in the different classes:

    .middleSection:has(p) p {
  background-color: lightgrey;

    Or you can use the @scope at-rule, which is the newest and better way to do this:

    @scope (.middleSection) to (.lowerSection) {
  p {
    background-color: lightgrey;
  }

    The @scope at-rule has partial browser support, so you may not want to use this option, but it helps us a lot for future CSS.

    Login or Signup to reply.
  2. 0

    Don’t put the p styling into that part of the selection.

    Just add a separate part which is for middleSection only:

    .topSection {
  .middleSection,
  .lowerSection {
    padding: 20px;
    font-size: 20px
  }
  .middleSection {
    p {
      background-color: lightgrey;
    }
  }
}
    <div class="topSection">
  <div class="middleSection">
    <p>This is some text in a paragraph.</p>
  </div>
  <div class="lowerSection">
    <p>This is some text in a paragraph.</p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    The :not() should apply to the parent so consider &

    .topSection {
  .middleSection,
  .lowerSection {
    padding: 20px;
    font-size: 20px;
    &:not(.lowerSection) p {
      background-color: lightgrey;
    }
  }
}
    <div class="topSection">
  <div class="middleSection">
    <p>This is some text in a paragraph.</p>
  </div>
  <div class="lowerSection">
    <p>This is some text in a paragraph.</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search