Referencing a CSS Class

Is it possible to reference one CSS rule within another?

No, you cannot reference one rule-set from another.

You can, however, reuse selectors on multiple rule-sets within a stylesheet and use multiple selectors on a single rule-set (by separating them with a comma).

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

You can also apply multiple classes to a single HTML element (the class attribute takes a space separated list).

<div class="opacity radius">

Either of those approaches should solve your problem.

It would probably help if you used class names that described why an element should be styled instead of how it should be styled. Leave the how in the stylesheet.

Referencing a CSS class only within a specific element only

As is, you are selecting any a element which is a descendant of an element with the class grade.

To specify an a element that has the grade class itself, change your selector to:

a.grade

a.grade {  color: red;}
.grade a {  color: green;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><li class="grade">   <a><i class="fa fa-star fa-fw">Text within an <a> descendant of .grade</i></a><br>      Text outside of <a> element</li>
<a class="grade"> Text in an <a> element, which has the class grade itself. </a>

How to reference another style class for complex selectors with material-ui

MUI uses CSS-in-JS

Use $ruleName to reference a local rule name within the same makeStyles style sheet.

const useStyles = makeStyles({
  Header: {
    fontWeight: "bold",
    display: "flex"
  },
  CloseButton: {
    padding: 0,
    borderWidth: 0,

    "&:before": {
      content: "'x'"
    },

    "$Header > &": { // <-- pay attention to usage of $
      marginLeft: "auto"
    }
  }
});

Below is what your CSS would look like:

How to reference nested classes with css?

In CSS, classes are prefixed by a ., ids are prefixed by #, and elements are not prefixed at all.

This is how you need to declare your CSS:

.box1 .box-body i {
   width: 30px;
}

Note that box1 and box-body are both classes, while i is an element.

---

Example:

<div class="class"></div>
<div id="id"></div>
<div></div>

I have listed three different <div> elements. This is how they would be accessed in CSS:

// first div
.class {
[some styling]
}

// second div
#id {
[some styling]
}

// third div
div {
[some styling]
}

Referencing a CSS Class

You are using LEFT DOUBLE QUOTATION MARK (“) and RIGHT DOUBLE QUOTATION MARK (”) where you should be using QUOTATION MARK (") (or APOSTROPHE (')) around your id attribute value.

Since those are not valid delimiters for an attribute value, they are treated as part of the id.

When this answer was originally written, this would have been picked up by a validator. IDs including those characters are valid in HTML 5 so that is no longer the case.

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".

How to reference a div with class=name1 name2?

The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:

.related { color:#ff0000 }
.products { font-size:12px }

If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:

.related.products { font-weight:bold }

And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.

Referencing a CSS class only within a specific element

There's lots of options. It all really depends on your circumstances. Here's a couple without modifying the HTML:

Using parent element

.row { color: blue }
header .row { color: red }

Using :nth-of-type

.column:nth-of-type(1) .row { color: red }
.column:nth-of-type(2) .row { color: blue }

If you're willing to add additional markup, you could always add additional classes.

---

Related Topics