Cset Cset - 18 days ago 9
CSS Question

Can't change the divs to classes, HTML

I'm trying to change the divs in my HTML code from ID to class, since in the beginning i didn't plan to use this more than once, but now i've changed my mind.

My problem is that I can not change it to a class, if I do everything looks wrong and not like it should.

Anyone know why or how I can fix this?

It's the "animation" 1-6 id's that I want as a class instead.

I'm, just gonna go ahead and post all my code her:



.animation {
width: 234px;
margin: auto;
}
.header_gradient {
display: block;
width: 80%;
height: 150px;
line-height: 150px;
margin: 0 auto;
background-color: #000000;
background: gray;
background: -o-linear-gradient(right, #141414, #848484);
background: -moz-linear-gradient(right, #141414, #848484);
background: linear-gradient(to right, #141414, #848484);
}
.animation_bokstav {
color: rgb(155, 155, 155);
font-family: "palatino Linotype", "Book Antiqua", "Palatino", "serif";
font-size: 300%;
text-decoration: none;
font-weight: bold;
font-style: normal;
float: left;
animation-name: bounce_inTurnFadingTextG;
-o-animation-name: bounce_inTurnFadingTextG;
-ms-animation-name: bounce_inTurnFadingTextG;
-webkit-animation-name: bounce_inTurnFadingTextG;
-moz-animation-name: bounce_inTurnFadingTextG;
animation-duration: 3.73s;
-o-animation-duration: 3.73s;
-ms-animation-duration: 3.73s;
-webkit-animation-duration: 3.73s;
-moz-animation-duration: 3.73s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-direction: normal;
-o-animation-direction: normal;
-ms-animation-direction: normal;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
}
#animation_1 {
animation-delay: 1.33s;
-o-animation-delay: 1.33s;
-ms-animation-delay: 1.33s;
-webkit-animation-delay: 1.33s;
-moz-animation-delay: 1.33s;
}
#animation_2 {
animation-delay: 1.6s;
-o-animation-delay: 1.6s;
-ms-animation-delay: 1.6s;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
}
#animation_3 {
animation-delay: 1.87s;
-o-animation-delay: 1.87s;
-ms-animation-delay: 1.87s;
-webkit-animation-delay: 1.87s;
-moz-animation-delay: 1.87s;
}
#animation_4 {
animation-delay: 2.13s;
-o-animation-delay: 2.13s;
-ms-animation-delay: 2.13s;
-webkit-animation-delay: 2.13s;
-moz-animation-delay: 2.13s;
}
#animation_5 {
animation-delay: 2.4s;
-o-animation-delay: 2.4s;
-ms-animation-delay: 2.4s;
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
}
#animation_6 {
animation-delay: 2.67s;
-o-animation-delay: 2.67s;
-ms-animation-delay: 2.67s;
-webkit-animation-delay: 2.67s;
-moz-animation-delay: 2.67s;
}
@keyframes bounce_inTurnFadingTextG {
0% {
color: rgb(0, 0, 0);
}
100% {
color: rgb(255, 255, 255);
}
}
@-o-keyframes bounce_inTurnFadingTextG {
0% {
color: rgb(155, 155, 155);
}
100% {
color: rgb(255, 255, 255);
}
}
@-ms-keyframes bounce_inTurnFadingTextG {
0% {
color: rgb(155, 155, 155);
}
100% {
color: rgb(255, 255, 255);
}
}
@-webkit-keyframes bounce_inTurnFadingTextG {
0% {
color: rgb(155, 155, 155);
}
100% {
color: rgb(255, 255, 255);
}
}
@-moz-keyframes bounce_inTurnFadingTextG {
0% {
color: rgb(155, 155, 155);
}
100% {
color: rgb(255, 255, 255);
}
}

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
</head>

<body>
<div id="wrapper">
<div id="content">

<div id="content_1" style="display:block">
<div class="header_gradient">
<div class="animation">
<div id="animation_1" class="animation_bokstav">T</div>
<div id="animation_2" class="animation_bokstav">a</div>
<div id="animation_3" class="animation_bokstav">t</div>
<div id="animation_4" class="animation_bokstav">b</div>
<div id="animation_5" class="animation_bokstav">u</div>
<div id="animation_6" class="animation_bokstav">k</div>

</div>
</div>


</div>
</div>

</body>

</html>




Answer

Once you have changed the divs from ID's (#) to classes(.) you need to change the selectors in your stylesheet, for example:

//Id's are targeted using a # and classes are targeted using a .
#animation_1 > .animation_1

<div class="animation_1 animation_bokstav">T</div>
<div class="animation_2 animation_bokstav">A</div>
<div class="animation_3 animation_bokstav">T</div>
<div class="animation_4 animation_bokstav">B</div>
<div class="animation_5 animation_bokstav">U</div>
<div class="animation_6 animation_bokstav">K</div>
Comments