CODEWITHSUNDEEP
htmlcss
litehause
litehause

Reputation: 313

how to add parent class in css file?

how to add parent class in css file

sourcse css

.pagination {
   font-size: 10px
}
a {
   font-size: 30px
}
...............

To get something like this

.parent-class {
   .pagination {
        font-size: 10px
   }
   a {
     font-size: 30px
   }
   ...............
}

It should be a lot of it will automatically wrap

Upvotes: 4

Views: 5382

Answers (6)

JJ LIN
JJ LIN

Reputation: 13

Here is my case. I get this css file from other website. Also need to add a parent class name as you need.

Following is an example code for Koa server.

import sass from "node-sass";
import axios from "axios";

export const settingApi = (router) => {
   router.get("/api/wrap_css", async (ctx) => {
   const { data } = await axios.get(
      "YOUR CSS FILE URL",
    );
    const result = sass.renderSync({
      data: `.parent-class{${data}}`,
      outputStyle: "compressed",
    });
    ctx.response.body = result.css.toString();
    ctx.response.status = 200;
    ctx.response.set("Content-Type", "text/css");
}

if your file is a static file try to read the file by fs.

    const fs = require("fs");
    const data = fs.readFileSync("css.file").toString();
    const compileResult = sass.renderSync({
      data: `.parent-class{${data}}`,
      outputStyle: "compressed",
    }).css.toString();   

// the compileResult string without compressed should be as following
.parent-class .pagination {
     font-size: 10px
}
.parent-class a {
     font-size: 30px
}
...............

Upvotes: 0

Rahul
Rahul

Reputation: 710

According to me it is not possible by plain css, You have to use LESS...
Use separate classes rather so that it can be repeated anywhere.

Anyhow CSS for <a> will be applicable everywhere and only thing left is .pagination class so simply apply

Upvotes: 0

skaldesh
skaldesh

Reputation: 1530

If the following HTML-Code is what you want 

<div class="parent-class">
    <div class="pagination"></div>
    <a>Example with font-size 30px</a>
</div>

You need the following CSS classes:

.parent-class { /* define parent class properties here */ }
.parent-class .pagination {
    font-size: 10px
 }
 .parent-class a {
    font-size: 30px
 }
 ...............

NOTE: The position of the div with the .pagination class and the "a"-tag are not important in this case. They will be affected by the CSS rules you defined no matter where they are located inside the .parent-class div
If you want a selector that only matches the children when they are DIRECT descendants of this element, you need something like this:

.parent-class { /* define parent class properties here */ }
/* '>' selects all elements with .pagination class, which have a parent element with class .parent-class */
.parent-class > .pagination {
    font-size: 10px
 }
 .parent-class > a {
    font-size: 30px
 }
 ...............

Upvotes: -1

Ashvin Jadav
Ashvin Jadav

Reputation: 134

Try this one:

.parent-class .pagination {
    font-size: 10px
}
.parent-class .pagination a{
    font-size: 30px
}

Upvotes: 0

GuyLorenzo
GuyLorenzo

Reputation: 89

.parent-class .pagination{
   font-size: 10px
}
.parent-class .pagination > a {
   font-size: 30px
}

Upvotes: 0

BenG
BenG

Reputation: 15154

the structure you have is sass/scss/less.

In css, you do it like so:-

.parent-class .pagination {
        font-size: 10px
}
.parent-class a {
     font-size: 30px
}
...............

Once sass/scss/less is compiled, it generates the css structure above.

Upvotes: 9

Related Questions