How to Include Common CSS Class in Another CSS Class

How to extend css class with another style?

You will have to use a CSS preprocessor to do this.

SASS

placeholder

%rounded-corner {}
%corner {}
%button-effective {}

.button {
  @extend %rounded-corner;
  @extend %corner;
  @button-effective;

  /* Some other styles. */
}

.box {
  @extend %rounded-corner;
}

Compiles to:

.button, .box {
  /* rounded-corner styles */
}

.button {
  /* corner styles here */
}

.button {
  /* button-effective styles here */
}

.button {
  /* Some other styles. */
}

/*
`.box` is NOT defined here because it only uses placeholders. So it
is placed where the placeholder is defined.
*/

Note: with placeholders, the CSS selector is added to wherever the placeholder is defined. Not where the selector is defined.

extend

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  @extend .rounded-corner;
  @extend .corner;
  @extend .button-effective
  // Continue with other classes.
}

Compiles to:

.rounded-corner, .button {}
.corner, .button {}
.button-effective, .button {}

mixin

@mixin rounded-corner {}
@mixin corner {}
@mixin button-effective {}

.button {
  @include .rounded-corner;
  @include .corner;
  @include .button-effective
  // Continue with other classes.
}

Compiles to:

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

LESS

LESS has a similar sytanx to SASS and also has extend and mixin, though LESS is a little more forgiving if you want to add one class' style to another. While I believe still considered a mixin in LESS, you can add one class style to another like the following without having to use a keyword.

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  .rounded-corner;
  .corner;
  .button-effective;
  // Continue with other classes.
}

Compiles to:

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

Is there a way to share common CSS classes?

Here's your HTML

<button class="commonProperties divMasterCol1Button1"/>
<button class="commonProperties divMasterCol1Button2"/>

Here's your CSS

.commonProperties {
  float: left;
  border-style: none;
  border-width: thin;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

.divMasterCol1Button2 {
  background-image: url("http://www.gettyimages.ca/gi-resources/images/CreativeImages/Hero-527920799.jpg");
}

.divMasterCol1Button1 {
  background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
}

Can a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Calling a CSS class inside another class?

You can't actually do a reference (one of CSS's major failings), but you can do this:

.btn:active, .red {
    /* Block A: Most (or all) of what used to just be in .red below */
}

.btn:active {
    /* Block B: Stuff *just* for .btn:active, if any */
}

.red {
    /* Block C: Stuff *just* for .red, if any */
}

The comma means that the definitions in the body of Block A apply separately to each of those selectors, and so they apply to any ".btn" elements that are ":active", and separately apply to any ".red" elements.

Block B and Block C are optional. They're for any definitions you only want to apply to the given selector. You usually list these after Block A because rules of equal specificity are applied top-to-bottom, so you can override anything from Block A that you want to in Block B or Block C, and those blocks will "win".

Ways to use common css styles for all other css class

You could try to go with the CSS3 Variables. Something like:

:root {
    --main-border-color: #F5E0C4;
}

.class1
{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
    border-color: var(--main-bg-color);
}

Is it possible to style a CSS class relative to another CSS class (not outer class)?

The element>element selector is used to select elements with a specific parent.

Note: Elements that are not directly a child of the specified parent, are not selected.

So, you must use + Selector :

The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.

Read More :

https://www.w3schools.com/cssref/sel_element_gt.asp

In your Case Change Code Like:

.btn-primary + p.stepwizard__step-text {

  color: red;

}

<div class="stepwizard__step">

    <a class="btn btn-primary stepwizard_btn">1</a>

    <p class="stepwizard__step-text">Payment</p>

</div>

---

Related Topics