How to set css properties to element but not to innerhtml

Question

I wonder if there is any way to set properties to an element but not its children.

E.g

<div>
<span>A child</span>
</div>

That the span child will not get affected.

So if I want to for example give the div a blur filter and don't want to affect the children of the element, how do I do it?

Depends on the properties you want to set. – Heretic Monkey Nov 07 '19 at 20:52 — Heretic Monkey, Nov 07 '19 at 20:52

score 1 · Answer 1 · answered Nov 07 '19 at 20:48

1

You could set the required property on the element you want to affect, then select the children of this element and unset the same property or give it a different value.

Does this answer your question?

answered Nov 07 '19 at 20:48

Tess

140
10

score 1 · Accepted Answer · answered Nov 07 '19 at 20:52

CSS is hierarchical; any attribute applied to a parent is automatically inherited by the child:

The only way to give a parent an attribute while simultaneously excluding the child is to additionally give the child an attribute that overrides the parent (with higher specificity):

This is best done with the initial value (which 'resets') the value, though you can use any other value you like:

div {
  color: red;
}

div > span {
  color: initial;
}

<div>Parent
  <span>A child</span>
</div>

Thanks, and you can use div > * to get all the children! – frogDoraTheRollerskatingFedora Nov 08 '19 at 08:58 — frogDoraTheRollerskatingFedora, Nov 08 '19 at 08:58

man of knowledge · Answer 3 · 2019-11-07T21:34:39.190

0

you can give separate classes to them and specify options separately in css.

edited Nov 07 '19 at 21:34

answered Nov 07 '19 at 20:50

man of knowledge

1,077
7
13

Oh yes yes, sorry for that, I delete all code will leave only thing about separate classes – man of knowledge Nov 07 '19 at 21:34
No problem at all, thanks for editing :) – Tess Nov 07 '19 at 21:55

score 0 · Answer 4 · answered Nov 07 '19 at 20:51

Not if you target the div (in this case) directly, then the span is force-blurred as well.

But, you could fake the div with a pseudo element, perhaps something like this:

div {
    width: 200px;
    height: 200px;
    position: relative;
}

/* A fake box with the same dimensions as the div */
div::before {
    content: "";
    background: red;
    display: block;
    filter: blur(10px);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

span {
    position: relative; /* Z-index purposes */
}

<div>
    <span>I'm not blurry :D</span>
</div>

How to set css properties to element but not to innerhtml

4 Answers4

Linked