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

How to target only a part of a nested CSS?

I have the following CSS:

.PageA, .PageB, .PageC {
    #parentDiv {
        /*some css*/
    }
    .plantTest {
        &.color {
            /*some css*/
            .row {
                /*some css*/
                p {
                    /*some css*/
                }
            }
        }
    }
    .oceanTest {       
        .depth {
            h2 {
                /*some css*/
            }
        }
    }

    #theContent {
            /*some css*/
    }
}

My question is, lets say I want PageA to get all of the CSS, but for PageB and PageC I only want to target the css that is in #theContent and ignore the CSS in #parentDiv, plantTest oceanTest .

The easy solution is to create separately CSS for PageB and PageC and target #theContent, but this would be repeated CSS code. So I am wondering is it possible to target only a part of a nested CSS?

Tags:

2

Answers


  1. 0

    Give both of them a common class, and then write variations within .PageX scopes.

    Also, sass parent selector could handy to write the code more easily:

    https://sass-lang.com/documentation/style-rules/parent-selector/

    Login or Signup to reply.
  2. 0

    We have:

    1. For .PageB, .PageC: share with .PageA styles with #theContent
    2. For .PageA: everything else + all from "1" (@extend .PageB;)

    As I see the solution:

    .PageB,
.PageC {
  /*some css*/
  #theContent {
    text-transform: capitalize;
  }
}

.PageA {
  // `.PageA`, `.PageB`, `.PageC`: common styles;
  @extend .PageB;

  // `.PageA` own styles
  /*some css*/

  #parentDiv {
    /*some css*/
  }
  .plantTest {
    /*some css*/
  }
  .oceanTest {
    /*some css*/
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search