Geek Answers Handbook

How to target all but the first tag in css3?

This is my html

<div class="app-screens">
    <a href="./includes/images/taaid/Screenshot_2013-12-08-15-00-37.png" data-title="TA AID" data-lightbox="taaid">
        <img src="./includes/images/taaid/Screenshot_2013-12-08-15-00-37.png"/>
    </a>
    <a href="./includes/images/taaid/Screenshot_2013-12-08-15-02-16.png" data-title="TA AID" data-lightbox="taaid">
        <img src="./includes/images/taaid/Screenshot_2013-12-08-15-02-16.png"/>
    </a>
    <a href="./includes/images/taaid/Screenshot_2013-12-08-15-03-38.png" data-title="TA AID" data-lightbox="taaid">
        <img src="./includes/images/taaid/Screenshot_2013-12-08-15-03-38.png"/>
    </a>
    <a href="./includes/images/taaid/Screenshot_2013-12-08-15-06-19.png" data-title="TA AID" data-lightbox="taaid">
        <img src="./includes/images/taaid/Screenshot_2013-12-08-15-06-19.png"/>
    </a>
    <a href="./includes/images/taaid/Screenshot_2013-12-08-15-06-29.png" data-title="TA AID" data-lightbox="taaid">
        <img src="./includes/images/taaid/Screenshot_2013-12-08-15-06-29.png"/>
    </a>
    <a href="./includes/images/taaid/Screenshot_2013-12-08-15-06-45.png" data-title="TA AID" data-lightbox="taaid">
        <img src="./includes/images/taaid/Screenshot_2013-12-08-15-06-45.png"/>
    </a>
</div>

and my css

.app-screens img:not(:first-child) { 
    display: none;
}

I want to hide all img tags except the first one. But they all still show ... Does anyone know what is wrong?

thank

+4
source share
4 answers

Instead of img: not (: first-child) you should use: not (: first-child).

CSS

.app-screens a:not(:first-child) { 
    display: none;
}
+2
source 
.app-screens a:not(:first-child) img { 
    display: none;
}

You must target in anchorsfront of the image.

+3
source

:

.app-screens a:not(:first-child) { 
    display: none;
}
+1

CSS2, :

.app-screens a img { display: none; }
.app-screens a:first-child img { display: block; }
0

More articles:


All Articles