-2

I have a dynamic page that displays multiple pages and has a class that starts with 'paged-' and the number of that page. I want to remove a div with SASS when it's on the page 2 and beyond like this:

    .paged-2, .paged-3, .paged-4, .paged-5, .paged-100{
      .removeonpagetwoandso{
        display: none;
      }
    }

But I don't want to write from paged-2 to paged-100 since I don't know how many pages it will have in the future.

This doesn't work:

    div[class^='paged'], div[class*='paged-']{
              .removeonpagetwoandso{
                display: none;
              }
    }

EDIT: Added HTML Structure

Page 1:

<body class="home"> 
 <div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>

Page 2 and so:

<body class="home paged-2"> 
 <div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>
Albert Einstein
  • 7,472
  • 8
  • 36
  • 71
mark-in-motion
  • 263
  • 6
  • 23
  • 1
    Given that those selectors a valid, you need to provide a _verifiable sample_, and here is how-to: [mcve] – Asons Jan 03 '19 at 11:24
  • Please check my updated answer, now that I can see your HTML I found the problem. – Arkellys Jan 04 '19 at 07:37

2 Answers2

0

SASS compile 

div[class^='paged'],
div[class*='paged-']{
  .removeonpagetwoandso{
    display: none;
    }
  }

to 

div[class^=paged] .removeonpagetwoandso,
div[class*=paged-] .removeonpagetwoandso {
  display: none;
}

In your case 

div[class^='paged-'] {
    .removeonpagetwoandso {
        display: none;
    }
}

is enough. It is compiled to 

div[class^=paged-] .removeonpagetwoandso {
  display: none;
}

which means child element having removeonpagetwoandso class of elements whose class starts with paged-. I think you have problem with your html structure. You HTML must look like as follows:

<div class="paged-1">
    <div class="removeonpagetwoandso">
        paged-1
    </div>
</div>
<div class="paged-2">
    <div class="removeonpagetwoandso">
        paged-2
    </div>
</div>
<div class="paged-3">
    <div class="removeonpagetwoandso">
        paged-3
    </div>
</div>
<div class="paged-4">
    <div class="removeonpagetwoandso">
        paged-4
    </div>
</div>
<div class="paged-5">
    <div class="removeonpagetwoandso">
        paged-5
    </div>
</div>
<div class="paged-100">
    <div class="removeonpagetwoandso">
        paged-100
    </div>
</div>
Albert Einstein
  • 7,472
  • 8
  • 36
  • 71
  • I have added my HTML structure. the .paged-2 class is actually inside the body tag. The .removeonpagetwoandso class is inside the body of the HTML. Every page, .page-* changes its number. – mark-in-motion Jan 04 '19 at 01:56
-2

pls try this css

<style> 
div[class^="paged-"]{
 .removeonpagetwoandso{
   display: none;
  }
}
</style>
AddWeb Solution Pvt Ltd
  • 21,025
  • 5
  • 26
  • 57