Nested CSS Styles

Nesting CSS classes

Not possible with vanilla CSS. However you can use something like:

• Sass

Sass makes CSS fun again. Sass is an
extension of CSS3, adding nested
rules, variables, mixins, selector
inheritance, and more. It’s translated
to well-formatted, standard CSS using
the command line tool or a
web-framework plugin.

Or

• Less

Rather than constructing long selector
names to specify inheritance, in Less
you can simply nest selectors inside
other selectors. This makes
inheritance clear and style sheets
shorter.

Example:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

CSS Style Nesting - Proper Form?

If you include more parents, it does increase selector specificity. You shouldn't have cross-browser problems omitting parents.

There is no correct number of parents to list; it depends on what you require for your markup. As you're seeing, selector1 selector2 means a selector2 at any level inside a selector1, and you can tune that for whatever behavior you need.

In your example, you should list .mainbody #container #header #toprightsearch .searchbox if what you mean is for the style to only apply to .searchboxes that are inside that entire hierarchy. If contrariwise you want .searchboxes that exist other under conditions to get the same style, you should be less restrictive in the hierarchy. It's only about what you're trying to accomplish.

Re comment: IDs produce more specificity, so omitting them reduces your rule's specificity more.

Is there a way to nest CSS selectors?

With the current CSS (2.1) version, nesting selectors isn't possible.

You'll have to use something called a CSS preprocessor which does several things, including allowing nested selectors.

I'd recommend SASS (SCSS), and another out there is LESS. You'll need some extra things setup on your PC/Mac for automatically converting preprocessor files to regular CSS files - plenty of other questions and research points on that out there.

If you use SCSS, you can check out what its like on SassMeister so you can see what the nested selectors will look like compiled.

Nested themable components: apply styles depending on a theme class of the nearest themed parent, ignoring deeper parents bearing theme classes

I think you are setting too many rules in your CSS.

Why don't you set the selector just for the themes, and leave inheritance do the job ?

.theme-blue {
  border-color: blue;
  color: blue;
  background-color: white;
}

.theme-red  {
  border-color: red;
  color: red;
  background-color: white;
}

div {
    border-width: 1px;
    border-style: solid;
    padding: 4px;
}

<div class="ComponentFoo theme-red">I am red
  <div class="ComponentBar theme-blue">I am blue
    <div class="ComponentBaz">I am nested
    </div>
  </div>
</div>

<div class="ComponentFoo theme-blue">I am blue
  <div class="ComponentBar theme-red">I am red
    <div class="ComponentBaz">I am nested
    </div>
  </div>
</div>

CSS nested class can't be selected directly?

Yes. You can access the class directly and there is nothing wrong with your code.

You are seeing CSS Specificity in action here

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

The three css classes you used:

1. .offer-img: an element with the class .offer-img (less specific)
2. .col-2 img: img element inside an element with class-name .col2 (more specific)
3. .col-2 .offer-img: an element with class-name .offer-img inside an element with class-name .col2 (most specific)

The most specific style for the element will be applied if there are conflicts.

Apply style to only nested class of current element

Is something like this getting close to what you're after?

.link-wrap:hover > .text-underline {
  border-color: blue;
}

<div class="link-wrap">
  <div class="link"> Github </div>
  <hr class="text-underline">
</div>

<div class="link-wrap">
  <div class="link"> Facebook </div>
  <hr class="text-underline">
</div>

lit: how to apply style to nested template?

Your best bet would be css variables. It is a standard and it is scoped.

.container-1 {
  --my-status: grey;
}

.container-2 > gmail-item:first-child {
  --my-status: orange;
}

<script type="module">
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class MyContainer extends LitElement {
  static get styles() {
    return css`
      .wrapper {
        min-height: 100px;
        min-width: 50%;
        margin: 5em;
        padding: 10px;
        background-color: lightblue;
      }
    `;
  }

  render() {
    return html`
      <div class="wrapper">
        <slot></slot>
      </div>
    `;
  }
}

class GmailItem extends LitElement {
  static get styles() {
    return css`
      .status {
        margin: 1em;
        border: 2px solid white;
        background-color: var(--my-status, red);
      }
    `;
  }

  render() {
    return html`
      <div class="status">STATUS</div>
    `;
  }
}

customElements.define("my-container", MyContainer);
customElements.define("gmail-item", GmailItem);
</script>

<my-container class="container-1">
  <gmail-item></gmail-item>
  <gmail-item></gmail-item>
</my-container>

<my-container class="container-2">
    <gmail-item></gmail-item>
    <gmail-item style="--my-status: magenta"></gmail-item>
</my-container>

---

Related Topics