CSS Grid apply template columns to child div through inline style

Question

I'm in scenario where I can add inline CSS to only one div.

For example:

<div class="main" style="my inline CSS">
  <div class="second">
    <div class="third">
       <div class="column></div>
       <div class="column></div>
       <div class="column></div>
    </div>
  </div>
</div>

I want to apply grid-template-columns: 1fr 2fr 1fr; (note: this can change) to the div third - the div nesting the column divs. As I mentioned I can add inline CSS only to div main.

Using the CSS grid system, is it possible to target the child div?

Note: In this scenario there is no access to the stylesheet - only inline style in the main div.

if you add more context, there is probably another solution. — Temani Afif, Mar 02 '19 at 19:10
Another solution would be using js to add the inline style where I want or and — CyberJ, Mar 02 '19 at 19:13

score 1 · Accepted Answer · answered Mar 02 '19 at 19:05

1

With CSS? Nope.

The style attribute's only scope is one specificity lower than !important for that element. It only accepts attributes, not selectors.

answered Mar 02 '19 at 19:05

jaasum

548
2
11

CSS Grid apply template columns to child div through inline style

1 Answers1

With CSS? Nope.