Styjun

Does KNN have a loss function?

How were x-ray diffraction patterns deciphered before computers?

What is realistic quality of computer blueprints quickly backed up before apocalypse and their impact on future design?

Does the use of a new concept require a prior definition?

Protect a 6 inch air hose from physical damage

Why have both: BJT and FET transistors on IC output?

UX writing: When to use "we"?

How did Biff return to 2015 from 1955 without a lightning strike?

How to draw twisted cuves?

Overprovisioning SSD on ubuntu. How? Ubuntu 19.04 Samsung SSD 860

Feedback diagram

How do discovery writers hibernate?

What's the proper way of indicating that a car has reached its destination during a dialogue?

How can a class have multiple methods without breaking the single responsibility principle

Export economy of Mars

How to structure presentation to avoid getting questions that will be answered later in the presentation?

How to get maximum number that newcount can hold?

Can an alphabet for a Turing machine contain subsets of other alphabets?

Is there a general term for the items in a directory?

"Will flex for food". What does this phrase mean?

What is the reason behind water not falling from a bucket at the top of loop?

If a Shadow Magic sorcerer casts Darkness using the Eyes of the Dark feature, can they cast another spell that requires concentration?

Can I shorten this filter, that finds disk sizes over 100G?

How do people drown while wearing a life jacket?

Assign Styles to a selector from another selector CSS

Is it possible to combine classes in CSS?Set cellpadding and cellspacing in CSS?Which characters are valid in CSS class names/selectors?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?Is there a “previous sibling” selector?How to style a <select> dropdown with only CSS?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?Is it possible to apply CSS to half of a character?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

Is there a way to have a class or any selector with specific styles, and then share, import or assign those styles to a another selector. This is to avid creating multiple classes and not having to go back to the HTML code all the time to assign such classes.

For example:

.orangeText
 color:orange


.strongtext
 font-weight:900

a regular scenario would use those clases like this:

<div class="orangeText strongtext">My orange Strong Text</div>

I am looking for something like this:

.orangeText
 color:orange


.strongtext
 font-weight:900


.orangeStrongTitle
 @.orangeText; /* Import styles from .orangeText*/
 @.strongtext; /* Import styles from .strongtext*/
 text-decoration:underline;

ON HTML:

<div class="orangeStrongTitle">My orange Strong Text</div>

PLEASE NOTE THAT @.orangeText IS MY INVENTION TO GIVE AN EXAMPLE OF WHAT I WANT, I DON'T KNOW IF SUCH THING EXISTS, I WAS INSPIRED ON @import

Is this possible?

css

share|improve this question

asked Mar 27 at 0:19

multimediaxpmultimediaxp

4,5931010 gold badges3434 silver badges6262 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Use LESS. With that you can literally just put .orangeText; .strongtext; text-decoration: underline; and it'll compile to the appropriate CSS. Takes some setup but it does make things a lot easier (especially the nesting feature).
  
  – Niet the Dark Absol
  Mar 27 at 0:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Also u can use SASS
  
  – Grzegorz Miśkiewicz
  Mar 27 at 0:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @NiettheDarkAbsol, I am looking for a vanilla solution, I don't have the option right now of installing or using third party libraries, but please add your solution as answer with a working example and I will definitely up-vote your answer.
  
  – multimediaxp
  Mar 27 at 0:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @GrzegorzMiśkiewicz, same thing please add a working example as an answer and I will up-vote it. Thanks
  
  – multimediaxp
  Mar 27 at 0:27
  

  
  
  
  

add a comment | 

1

Is there a way to have a class or any selector with specific styles, and then share, import or assign those styles to a another selector. This is to avid creating multiple classes and not having to go back to the HTML code all the time to assign such classes.

For example:

.orangeText
 color:orange


.strongtext
 font-weight:900

a regular scenario would use those clases like this:

<div class="orangeText strongtext">My orange Strong Text</div>

I am looking for something like this:

.orangeText
 color:orange


.strongtext
 font-weight:900


.orangeStrongTitle
 @.orangeText; /* Import styles from .orangeText*/
 @.strongtext; /* Import styles from .strongtext*/
 text-decoration:underline;

ON HTML:

<div class="orangeStrongTitle">My orange Strong Text</div>

PLEASE NOTE THAT @.orangeText IS MY INVENTION TO GIVE AN EXAMPLE OF WHAT I WANT, I DON'T KNOW IF SUCH THING EXISTS, I WAS INSPIRED ON @import

Is this possible?

css

share|improve this question

asked Mar 27 at 0:19

multimediaxpmultimediaxp

4,5931010 gold badges3434 silver badges6262 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Use LESS. With that you can literally just put .orangeText; .strongtext; text-decoration: underline; and it'll compile to the appropriate CSS. Takes some setup but it does make things a lot easier (especially the nesting feature).
  
  – Niet the Dark Absol
  Mar 27 at 0:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Also u can use SASS
  
  – Grzegorz Miśkiewicz
  Mar 27 at 0:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @NiettheDarkAbsol, I am looking for a vanilla solution, I don't have the option right now of installing or using third party libraries, but please add your solution as answer with a working example and I will definitely up-vote your answer.
  
  – multimediaxp
  Mar 27 at 0:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @GrzegorzMiśkiewicz, same thing please add a working example as an answer and I will up-vote it. Thanks
  
  – multimediaxp
  Mar 27 at 0:27
  

  
  
  
  

add a comment | 

Is there a way to have a class or any selector with specific styles, and then share, import or assign those styles to a another selector. This is to avid creating multiple classes and not having to go back to the HTML code all the time to assign such classes.

For example:

.orangeText
 color:orange


.strongtext
 font-weight:900

a regular scenario would use those clases like this:

<div class="orangeText strongtext">My orange Strong Text</div>

I am looking for something like this:

.orangeText
 color:orange


.strongtext
 font-weight:900


.orangeStrongTitle
 @.orangeText; /* Import styles from .orangeText*/
 @.strongtext; /* Import styles from .strongtext*/
 text-decoration:underline;

ON HTML:

<div class="orangeStrongTitle">My orange Strong Text</div>

PLEASE NOTE THAT @.orangeText IS MY INVENTION TO GIVE AN EXAMPLE OF WHAT I WANT, I DON'T KNOW IF SUCH THING EXISTS, I WAS INSPIRED ON @import

Is this possible?

css

share|improve this question

asked Mar 27 at 0:19

multimediaxpmultimediaxp

4,5931010 gold badges3434 silver badges6262 bronze badges

.orangeText
 color:orange


.strongtext
 font-weight:900

<div class="orangeText strongtext">My orange Strong Text</div>

.orangeText
 color:orange


.strongtext
 font-weight:900


.orangeStrongTitle
 @.orangeText; /* Import styles from .orangeText*/
 @.strongtext; /* Import styles from .strongtext*/
 text-decoration:underline;

<div class="orangeStrongTitle">My orange Strong Text</div>

share|improve this question

asked Mar 27 at 0:19

multimediaxpmultimediaxp

4,5931010 gold badges3434 silver badges6262 bronze badges

share|improve this question

asked Mar 27 at 0:19

multimediaxpmultimediaxp

4,5931010 gold badges3434 silver badges6262 bronze badges

asked Mar 27 at 0:19

multimediaxpmultimediaxp

4,5931010 gold badges3434 silver badges6262 bronze badges

asked Mar 27 at 0:19

multimediaxpmultimediaxp

4,5931010 gold badges3434 silver badges6262 bronze badges

1 Answer
1

active

oldest

votes

4

With traditional CSS it seem's that you can't.

See this topic : Is it possible to combine classes in CSS?

Unless you use LESS or SASS's 'mixin' features, there's no real way in
plain CSS to "inherit" other classes. The best you can do is apply
all three classes to your DOM element. If your problem is that you
have a ton of those classes already on a page and you want to add
properties to all of them, you can do:

.foo, .bar, .foobar 
 color: red;

and that will apply color: red to any element that has .foo or .bar or
.foobar.

EDIT

Since you're asking for an exemple, here is how the mixin feature of SASS works :

@mixin mixin-name 
 margin: 0;
 padding: 0;


ul 
 @include mixin-name;

Having this will compile into this :

ul 
 margin: 0;
 padding: 0;

share|improve this answer

edited Mar 27 at 9:30

answered Mar 27 at 0:26

ThomasThomas

6588 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368021%2fassign-styles-to-a-selector-from-another-selector-css%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

4

With traditional CSS it seem's that you can't.

See this topic : Is it possible to combine classes in CSS?

Unless you use LESS or SASS's 'mixin' features, there's no real way in
plain CSS to "inherit" other classes. The best you can do is apply
all three classes to your DOM element. If your problem is that you
have a ton of those classes already on a page and you want to add
properties to all of them, you can do:

.foo, .bar, .foobar 
 color: red;

and that will apply color: red to any element that has .foo or .bar or
.foobar.

EDIT

Since you're asking for an exemple, here is how the mixin feature of SASS works :

@mixin mixin-name 
 margin: 0;
 padding: 0;


ul 
 @include mixin-name;

Having this will compile into this :

ul 
 margin: 0;
 padding: 0;

share|improve this answer

edited Mar 27 at 9:30

answered Mar 27 at 0:26

ThomasThomas

6588 bronze badges

add a comment | 

4

With traditional CSS it seem's that you can't.

See this topic : Is it possible to combine classes in CSS?

Unless you use LESS or SASS's 'mixin' features, there's no real way in
plain CSS to "inherit" other classes. The best you can do is apply
all three classes to your DOM element. If your problem is that you
have a ton of those classes already on a page and you want to add
properties to all of them, you can do:

.foo, .bar, .foobar 
 color: red;

and that will apply color: red to any element that has .foo or .bar or
.foobar.

EDIT

Since you're asking for an exemple, here is how the mixin feature of SASS works :

@mixin mixin-name 
 margin: 0;
 padding: 0;


ul 
 @include mixin-name;

Having this will compile into this :

ul 
 margin: 0;
 padding: 0;

share|improve this answer

edited Mar 27 at 9:30

answered Mar 27 at 0:26

ThomasThomas

6588 bronze badges

add a comment | 

With traditional CSS it seem's that you can't.

See this topic : Is it possible to combine classes in CSS?

Unless you use LESS or SASS's 'mixin' features, there's no real way in
plain CSS to "inherit" other classes. The best you can do is apply
all three classes to your DOM element. If your problem is that you
have a ton of those classes already on a page and you want to add
properties to all of them, you can do:

.foo, .bar, .foobar 
 color: red;

and that will apply color: red to any element that has .foo or .bar or
.foobar.

EDIT

Since you're asking for an exemple, here is how the mixin feature of SASS works :

@mixin mixin-name 
 margin: 0;
 padding: 0;


ul 
 @include mixin-name;

Having this will compile into this :

ul 
 margin: 0;
 padding: 0;

share|improve this answer

edited Mar 27 at 9:30

answered Mar 27 at 0:26

ThomasThomas

6588 bronze badges

@mixin mixin-name 
 margin: 0;
 padding: 0;


ul 
 @include mixin-name;

ul 
 margin: 0;
 padding: 0;

share|improve this answer

edited Mar 27 at 9:30

answered Mar 27 at 0:26

ThomasThomas

6588 bronze badges

answered Mar 27 at 0:26

ThomasThomas

6588 bronze badges

answered Mar 27 at 0:26

ThomasThomas

6588 bronze badges