I’m new to web development and I’ve got an HTML document with some classes. When designing, I encountered the following code snippet:
<button class="roll"><i class="ion-ios-loop"></i><span>Roll dice</span></button>
<button class="hold"><i class="ion-ios-download-outline"></i><span>Hold</span></button>Here is my CSS for that HTML code:
.hold span{
padding-left: 10px;
transition: .2s;
}
.roll span{
padding-left: 10px;
transition: .2s;
}
.roll span:hover{
padding-left: 20px;
}
.hold span:hover{
padding-left: 20px;
}However, when I tried to make it shorter like this, it didn’t work as expected:
.hold.roll span{
padding-left: 10px;
transition: .2s;
}
.hold.roll span:hover{
padding-left: 20px;
}.hold,.roll span{
padding-left: 10px;
transition: .2s;
}
.hold,.roll span:hover{
padding-left: 20px;
}