Can't select proper element trough CSS

Question

I'm a young developper and I try to learn things every day! today, amongst many things : Parallax.

Seemed so cool and easy!!!

but, something that never happened to me before happened, and I can't understand the hell why...

I tried to select div:nth-childs of my html elements tu style them, but nothing works... for the divs!! I explain more : if i place in my css for exemple : "*:nth-child(1)" this works, same for h2, body, etc... but div:nth-child(1) won't select my div(s)!

For advanced coders, you guessed what I'm trying to do : style the 4 divs, without the need of class or ID to create a parallax effect with JS.

Any tips or idea how I can get trough that? Thanks =)

https://codepen.io/Voodoobear/pen/pZxBKb

const parallax = document.getElementById("parallax");

window.addEventListener("scroll", function() {
  let offset = window.pageYOffset;
  parallax.style.backgroundPositionY = offset * 0.7 + "px";
})

* {
  border: 0;
  padding: 0;
  margin: 0;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: big john;
  width: 100%;
  height: 100vh;
}

h2 {
  font-size: 60px;
  background: #eee;
  padding: 8px 24px;
  border-radius: 16px;
}

div:nth-child(1) {
  background-image: url('https://anotherwhiskyformisterbukowski.com/wp-content/uploads/2018/02/le-web-daujourdhui-1.jpg');
  background-size: cover;
}

div:nth-child(2) {
  background: maroon;
}

div:nth-child(3) {
    background-image: url('https://anotherwhiskyformisterbukowski.com/wp-content/uploads/2018/02/le-web-daujourdhui-1.jpg');
  background-size: cover;
  background-attachment: fixed;
}

div:nth-child(4) {
  background: aquamarine;
}

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Paralax</title>
</head>
<body>
  
  <div id="parallax">
    <h2>Div 1</h2>
  </div>
  <div>
    <h2>Div 2</h2>
  </div>
  <div>
    <h2>Div 3</h2>
  </div>
  <div>
    <h2>Div 4</h2>
  </div>
  
</body>
</html>

always use a container, don't leave them child of body .. your code is changing later and more child are added to body and snippet like here, jsfiddle and codepen will treat the code differently — Temani Afif, Aug 08 '18 at 12:48
simply add a `div` container to your 4 element and it will work fine everywhere ... also don't apply style to `div` (you may have many divs in your code), better add classe to be more specific — Temani Afif, Aug 08 '18 at 12:51
Yes, obviously, this is just a pen to learn and henance my skills, that is why I did this way, and to learn how to use the pseudo-class. — Voodoobear, Aug 08 '18 at 12:54
you are using the classes in the right way ... but you are facing some things that are out of your control .. your code is being changed that's why your selector aren't working and that's why you need to keep the control by adding your own container — Temani Afif, Aug 08 '18 at 12:57

Can't select proper element trough CSS

0 Answers0