Apply CSS opacity to parent, but not child

Question

I have a sentence with a highlighted word:

I'm trying to make it so the class="special" is visible and the rest of the class="sentence" appears around it.

After a few seconds, I'm triggering this:

setTimeout(() => {
  document.getElementById("sentence-1").className += " fadeIn";
}, 2000)

.sentence {
  opacity: 0;
}
.special {
  opacity: 1;
}

.fadeIn{
  opacity: 1;
  transition: opacity 2s 2s;
}

<span id="sentence-1" class="sentence">This is the special <span id="special-1" class="special">word</span>, cool huh?</span>

Which in my mind says set the opacity of .sentence to 0 and the opacity of .special to 1 then fade in sentence when the javascript is triggered...

Instead, the whole thing fade in, and I can't make .special visible all the time.

Edits: I have access to either .class or #id for the parent and child element if that helps...

When putting a `.` before a css selector, it means it's a class. In your HTML you have used an id. To reference an id its `#` + name, so I suggest trying to change `.sentence` to `#sentence` and same for special but not fadeIn. — Sean, Jun 15 '20 at 03:10
I've been going back and forth between id and class I messed it up... I'll edit the question. If it helps, I have access to both span, and unique id... — Trees4theForest, Jun 15 '20 at 03:20
What is the effect you want to have? What is the initial state and what would happen after 2 sec? — Mr. Brickowski, Jun 15 '20 at 03:23
Your edits caused your snippet to throw an error. You no longer have an element with ID `sentence`. — Robby Cornelissen, Jun 15 '20 at 03:24
@Mr.Brickowski Initial: Just the "special" word shows. After 2 seconds, the rest of the "sentence" fades in. — Trees4theForest, Jun 15 '20 at 03:25

Phil · Answer 1 · 2020-06-15T03:27:45.053

6

You won't be able to do this with opacity because you cannot nest opaque elements within a transparent one. The net result is complete transparency.

What you can do instead is use an rgba colour value and transition the alpha channel.

For example

window.addEventListener('load', () =>
  document.querySelector(".sentence").classList.add("fadeIn"));

.sentence {
  color: rgba(0, 0, 0, 0);
  transition: color 2s 2s;
}
.special {
  color: #000;
}

.fadeIn {
  color: rgba(0, 0, 0, 1);
}

<span class="sentence">This is the special <span class="special">word</span>, cool huh?</span>

Note: I had to run the JS within the window load event to ensure the CSS applied correctly

edited Jun 15 '20 at 03:27

answered Jun 15 '20 at 03:25

Phil

157,677
23
242
245

Huh... well, I'll be gosh darned. That's a bummer about opacity being absolute... – Trees4theForest Jun 15 '20 at 03:27
Can I set JUST the alpha and not the color (ie, use the base color from my global CSS)? (Edit: Possibly? ... https://stackoverflow.com/questions/6962432/is-it-possible-to-change-only-the-alpha-of-a-rgba-background-colour-on-hover) – Trees4theForest Jun 15 '20 at 03:31
@Trees4theForest I thought you might ask that and the answer is _perhaps_. See [Is it possible to change only the alpha of a rgba background colour on hover?](https://stackoverflow.com/questions/6962432/is-it-possible-to-change-only-the-alpha-of-a-rgba-background-colour-on-hover) – Phil Jun 15 '20 at 03:32

score 2 · Answer 2 · answered Jun 15 '20 at 03:42

2

setTimeout(() => {
var x = document.getElementsByClassName('sentence');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' fadeIn'; // WITH space added
}
  

}, 2000)

.sentence {
  opacity: 0;
}
  
.fadeIn{
  opacity: 1;
  transition: opacity 2s 2s;
}

 <span class="sentence">This is the special </span>word
 <span class="sentence">
, cool huh?</span>

answered Jun 15 '20 at 03:42

Daveo

19,018
10
48
71

1

You changed the rules of the game ;-). I can't get each chunk surrounding the special word in individual `sentence` spans... it's parent (sentence) and child (special) for me unfortunately. But +1 for the idea! – Trees4theForest Jun 15 '20 at 03:57

Apply CSS opacity to parent, but not child

2 Answers2