Hi I have 19 pictures that I want to hide, but the nummer 14 should show. This is going to be changed by javascript so I need to have all these pictures in my html. My code (and yes I know that the pictures aren't going to bo here, but when they are shown, there are icons replacing them):
.anim_pics {
visibility: hidden;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 10px;
resize: both;
left: 10px;
height: 10%;
width: auto;
}
.anim_pics#14 {
visibility: visible;
}
<img class="anim_pics" id="1" src="Bilder_Anim/1.jpg">
<img class="anim_pics" id="2" src="Bilder_Anim/2.jpg">
<img class="anim_pics" id="3" src="Bilder_Anim/3.jpg">
<img class="anim_pics" id="4" src="Bilder_Anim/4.jpg">
<img class="anim_pics" id="5" src="Bilder_Anim/5.jpg">
<img class="anim_pics" id="6" src="Bilder_Anim/6.jpg">
<img class="anim_pics" id="7" src="Bilder_Anim/7.jpg">
<img class="anim_pics" id="8" src="Bilder_Anim/8.jpg">
<img class="anim_pics" id="9" src="Bilder_Anim/9.jpg">
<img class="anim_pics" id="10" src="Bilder_Anim/10.jpg">
<img class="anim_pics" id="11" src="Bilder_Anim/11.jpg">
<img class="anim_pics" id="12" src="Bilder_Anim/12.jpg">
<img class="anim_pics" id="13" src="Bilder_Anim/13.jpg">
<img class="anim_pics" id="14" src="Bilder_Anim/14.jpg">
<img class="anim_pics" id="15" src="Bilder_Anim/15.jpg">
<img class="anim_pics" id="16" src="Bilder_Anim/16.jpg">
<img class="anim_pics" id="17" src="Bilder_Anim/17.jpg">
<img class="anim_pics" id="18" src="Bilder_Anim/18.jpg">
<img class="anim_pics" id="19" src="Bilder_Anim/19.jpg">
Should't .anim_pics#14 have more specificity than .anim_pics?