not:first-child applies to all element and not to first one

Question

that is simple js gallery. I use not:first-child to shown only one photo one page is loaded. But it doesn't hide others photos. link: http://liebeundsprueche.com/kaley-cuoco-nackt/ (some photos are +18)

My goal is to hide hide all photos without first one, when page is loaded. After clicking on buttons it should show next or previuos pphotos normally. I don't understand what i wrote syntaxicali or logically wrong. JS works, css not.

 var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "inline"; }

 .mySlides not:first-child { display: none !important; }

 <div class="btt"><button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button" onclick="plusDivs(1)">Next ❯</button></div> <div class="w3-content"> <div><img class="mySlides" src="/wp-content/images/1.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/2.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/3.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/4.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/5.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/6.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/7.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/8.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/9.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/10.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/11.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/12.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/13.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/14.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/15.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/16.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/17.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/18.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/19.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/20.jpg" alt="Kaley Cuoco nackt "></div> <div><img class="mySlides" src="/wp-content/images/21.jpg" alt="Kaley Cuoco nackt "></div> <div><img class="mySlides" src="/wp-content/images/22.jpg" alt="Kaley Cuoco nackt "></div> </div>

Answer 1

First you have error in the syntax and second an error in the logic. You may notice that .mySlides are inside a div so they are not child of same parent so first-child will trigger all of them. you also need to remove !important or the JS code won't work as !important will have more priority then inline style.

So you need to make them inside the same div (they should have the same parent) and correct the CSS syntax and of :not() like this:

 var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "inline"; }

 .mySlides:not(:first-child) { display: none; }

 <div class="btt"><button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button" onclick="plusDivs(1)">Next ❯</button></div> <div class="w3-content"> <div><img class="mySlides" src="https://lorempixel.com/400/400/" alt="Kaley Cuoco nackt"><img class="mySlides" src="https://lorempixel.com/400/420/" alt="Kaley Cuoco nackt"> <img class="mySlides" src="https://lorempixel.com/420/400/" alt="Kaley Cuoco nackt"> <img class="mySlides" src="https://lorempixel.com/420/420/" alt=Kaley Cuoco nackt ""></div> </div>

Answer 2

You have a few issues here.

The first is that you're trying to identify whether or not .mySlides is a first child. However, every .mySlides element is inside a single div, so it is always the first (and only) child. You cannot identify it that way.

You would need to target .w3-content > div instead to get all direct descendants of the container.

The other mistakes are in the pseudo-selectors. Once you have the right target, you need to use the format :not(selector) without any gap before it. So in this case, it would be :not(:first-child) .

In other words, you have added an extra space after .mySlides , removed a colon before not , and missed out the brackets around :first-child .

So, the correct CSS would be:

.w3-content > div:not(:first-child) { display: none; }

An alternative way would be to hide all the slides, and then show the first one:

.w3-content > div { display: none; }
.w3-content > div:first-child { display: block; }

You will also need to update your JS to target the right elements after this (by adding parentElement for example:

x[i].parentElement.style.display = "none";

and:

x[slideIndex - 1].parentElement.style.display = "inline";

Answer 3

As commented,

Should it not be :not? Also, there should not be a space between .mySlides and :not. Space means children.

the reason its not working is because all your img are first child

You can use div.w3-content div:not(:first-child) img.mySlides selector instead.

Idea

• Get all divs in .w3-content except first child. I'm directly using div but you should add a class and use it as div.className
• Hide mySlides in them.

Sample:

 div.w3-content div:not(:first-child) img.mySlides { display: none; }

 <div class="btt"><button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button" onclick="plusDivs(1)">Next ❯</button></div> <div class="w3-content"> <div><img class="mySlides" src="/wp-content/images/1.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/2.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/3.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/4.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/5.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/6.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/7.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/8.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/9.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/10.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/11.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/12.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/13.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/14.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/15.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/16.jpg" alt=Kaley Cuoco nackt ""></div> <div><img class="mySlides" src="/wp-content/images/17.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/18.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/19.jpg" alt="Kaley Cuoco nackt"></div> <div><img class="mySlides" src="/wp-content/images/20.jpg" alt="Kaley Cuoco nackt "></div> <div><img class="mySlides" src="/wp-content/images/21.jpg" alt="Kaley Cuoco nackt "></div> <div><img class="mySlides" src="/wp-content/images/22.jpg" alt="Kaley Cuoco nackt "></div> </div>

Answer 4

Have a look at css tricks

It should be like

.mySlides:not(:first-child){
    display:none !important;
}