css defined style integrated in others?

[Big Sanch]

Hi there

I didnt found any solution couse Im not sure what to search, so Im asking here now

Is it possible to integrate defined classes in other ones? As example:
(I know, its not possible like that its only an visual example)

Lets assume this has been defined

 /* defined styles */
 .r5{
      border-radius:5px;
      -webkit-border-radius:5px
 }
 .r10{
      border-radius:10px;
      -webkit-border-radius:10px
 }

Lets assume this comes later in this stylesheet

 #box{
      font-size:12px;

      /* Lets assume I need now border radius */
      /* need to write for each selector new? */
      /* or is there something like: */

      @import(.r5) or get(.r5)
 }

Is it necessary to write everythin new for each style?
Hope you can help

Thanks to all

[Pogany]

Hi Big Sanch,
#box can also have a class, like this:

<div id='box' class='r5'>

I hope this helps.

[Big Sanch]

Hi

@ Pogany

Thx for the answer, but this doesn answer my question.
I know how to give Objects multible classes.
My question was if its possible to combine slasses with existing ones.

[Paulie_D]

No…it’s not.

Not in the terms you have stated

Selectors are specific…heck that’s why we have specificity problems.

#box applies to all (well the one) elements with an ID of box

#box.r5 applies to all (well the one) elements with an ID of box which also has a class of r5.

That’s not to say there aren’t some clever things you can do with a CSS pre-processor but, in the end, they still churn out the same CSS as though you’d written it yourself.

CSS Custom Properties (or CSS Variables) might be a solution though….

https://codepen.io/Paulie-D/pen/OZyXwM

[Big Sanch]

Hi

@ Paulie_D

Thx for answer. Now I understand.
I only thougt it would make work easier when somethig like this would be possible.

Have a nice day

[hanrihelen]

Hi, I have exactly the problem I have not encountered, or I did not have a clear explanation at all.

[Mamun]

My earlier post is not visible for some reason. I explained something. Anyway, take a look at this link. This might help a little.

https://codepen.io/kh-mamun/pen/PePJKB

[Big Sanch]

Hi

@ Mamun

Thx for answer. This with :root Paulie_D had explained too. This is not exactly what I wantetd, but its not a problem.
It was only the question if its possible or not.
root is very good for single entries. But if i define mayby:

.paper { font-family:paper; font-size 16; font-weight:normal;}
.times { font-family:times; font-size 12; font-weight:bold;}

I tried to find a solution not to write it again so i can use something like:

.box {
background:#000000;
.paper
}

And this post and other posts Ive written tells its not possible.

But thank you for the answers

[Mamun]

Oh haha. It’s possible only on SASS or LESS.
I thought you needed the whole definition of .paper inside .box. You can’t write .paper directly inside .box but you can write:

.paper, .box {
/* definition */
}

Anyway, thanks a lot.

[Big Sanch]

Hi

@ Mamun

Thx for answer.
Like I looked for the moment, LESS is what I want. Thats working with that what I want to use.
Thank you very much.

[Author]

Posts