Why isn't my css code working?

If you use more html or button items, then make sure that they have different classes, and not just on the same slide, but on the others too. Because if they don't, then the first css rule will apply to every one of them, because of the same priority from the view of the browser.

Priority example

The code will be this:

<div class="main">
  <div class="container">
    <div class="mydiv" id="textid">
      Text
    </div>
  </div>
</div>

Here is a list of stronger priorities starting from the lowest:

/*tag*/
div{
	color:blue;
}

/*class*/
.mydiv{
	color:blue;
}

/*parent tag and current tag's class divided by space*/
div .mydiv{
	color:blue;
}

/*no space between the class and tag, 
so this is pointing to the current tag's class 
by specifying the tag too*/
div.mydiv{
	color:blue;
}
 
/*parent class and current tag's class*/
.container .mydiv{
	color:blue;
}
 
div .container .mydiv{
	color:blue;
}
 
.main .container .mydiv{
	color:blue;
}
 
#textid{
	color:blue;
}
 
div #textid{
	color:blue;
}
 
.container #textid{
	color:blue;
}
 
div .container #textid{
	color:blue;
}
 
.main .container #textid{
	color:blue;
}			

	
<!--inline css-->
<div class="main">
  <div class="container">
    <div class="mydiv" id="textid" style="color:blue;">
      Text
    </div>
  </div>
</div>

	
.mydiv{
	color:blue!important;
}
 
.container .mydiv{
	color:blue!important;
}
 
.main .container .mydiv{
	color:blue!important;
}
 
#textid{
	color:blue!important;
}
 
div #textid{
	color:blue!important;
}
 
.container #textid{
	color:blue!important;
}
  
div .container #textid{
	color:blue!important;
}
 
.main .container #textid{
	color:blue!important;
}

<div class="main">
  <div class="container">
    <div class="mydiv" id="textid" style="color:blue !important;">
      Text
    </div>
  </div>
</div>