How to stop two elements effecting each other? - html

Question

I'm creating an animation https://codepen.io/adsler/pen/bGNWxOe and I've created a div class. I've adjusted this with css. It works. However, as soon as I introduce another div class, it's not only effected by the first, but there seems to be no way of selecting it with css.
So here is the original:
Html:
<div
class="random">four<br>
three<br>zero<br>nine</div>
Css:
.random {background.
color:red;background-image:
linear-gradient(black,
white); width: 10px; height:
200px; font-weight: 900;
position:relative; font-
size:20px; left: 20x;
top:60px; filter:sepia(0);
color:black; border-radius:
100px; box-shadow: 90px 90px
30px 90px #000; text-align:
center;}
.random {animation: turn 30s
ease-in infinite; animation.
direction: alternate.
reverse;animation-delay:
2s;}
#keyframes turn {
0%
{transform:rotate(1400deg);
width: 1px} 30%.
{transform:rotatex(7000deg);
font-size: 30px;} 40%
{transform:rotatez(360deg);
width: 13em} 70%
{width: 10em;}100%
{opacity: 0.9;}
That's fine but then, when I introduce the next sequence, by way of a div class, I can't find the selector with css and the style is influenced by the first div.
<div
class="starring">Starring
</div>
.starring {margin-top: 500px
!important; font-size: 50px
!important;}
So I tried specificity.
.random.starring {margin.
top: 500px
!important; font-size: 50px
!important;}
Still unable to select starring with css and style still influenced by previous div.

Answer 1

In your codepen under the html section you have one too many ending 's in the first part.
Like this:
<div class="random">four<br>three<br>zero<br>nine</div></div>
<div class="starring">Starring</div>
Which should be:
<div class="random">four<br>three<br>zero<br>nine</div>
<div class="starring">Starring</div>
Next thing is - you don't end your animation in your css part
#keyframes turn {
0%{transform:rotate(1400deg);
width: 1px}
30%{transform:rotatex(7000deg);
font-size: 30px;}
40% {transform:rotatez(360deg);
width: 13em}
70% {width: 10em;}100%
{opacity: 0.9;}
Here you need a last } to actually wrap up the turn tag.
Like this:
#keyframes turn {
0%{transform:rotate(1400deg);
width: 1px}
30%{transform:rotatex(7000deg);
font-size: 30px;}
40% {transform:rotatez(360deg);
width: 13em}
70% {width: 10em;}100%
{opacity: 0.9;}
}
Make these changes and it works as supposed.
.starring {
color:red;
}
Works for me.

Answer 2

The problem is you are missing a closing } for your turn keyframe.
#keyframes turn {
0% {
transform:rotate(1400deg);
width: 1px
}
30% {
transform: rotatex(7000deg);
font-size: 30px;
}
40% {
transform: rotatez(360deg);
width: 13em
}
70% {
width: 10em;
}
100% {
opacity: 0.9;
}
}
And then for your second div, this will work:
.starring {
margin-top: 500px !important;
font-size: 50px !important;
}

Answer 3

I feel best solution here would be giving css to 1 element.
Add position:absolute to 1 of the element. And further accordingly adjust the element wherever you want using margin-bottom and margin-left!