What is the difference between adding .classA and .classB.classA in CSS?
Question
the problem is when I put .show instead of .box.show in CSS the even boxes don't come from the left side. I just wanna know why? because I thought they were the same thing. but it seems like in this code they are behaving differently.
const boxes = document.querySelectorAll('.box'); window.addEventListener('scroll',()=>{ const triggerPoint=window.innerHeight*4/5; boxes.forEach((box)=>{ const boxTop=box.getBoundingClientRect().top; if(boxTop<triggerPoint){ box.classList.add('show') }else{ box.classList.remove('show') } }) })
*{ padding:0; margin:0; box-sizing: border-box; } body{ background-color: #efedd6; min-height: 100%; width:100%; display:flex; justify-content: center; align-items: center; flex-direction: column; overflow-x: hidden; }.box{ width: 100px; height: 100px; background-color: rgb(226, 43, 43); margin:10px; transform: translateX(4000%); transition:0.4s; } h1{ margin:10px; }.box:nth-of-type(even){ transform: translateX(-4000%); }.box.show{ transform: translateX(0%); transition: .4s; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Scroll Animation</title> </head> <body> <!-- <h1>scroll to see the Animation</h1> --> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <script src="main.js"></script> </body> </html>
2 answers
solution1
0 2021-05-08 16:58:17
This is how selector's specificity works ( https://www.w3.org/TR/selectors-3/#specificity )
If you look in developers tools at .show element, you will see, that transform style being overridden by .box:nth-of-type(even) class, because pseudo class :nth-of-type has higher specificity.
You can check it at https://isellsoap.github.io/specificity-visualizer/
solution2
0 ACCPTED 2021-05-08 17:04:41
.classA targets elements with CSS class classA and has a CSS specificity of 0, 0, 1, 0. Let's say 10.
classA.classB (or .classB.classA ) targets elements with both classes classA and classB . This time with a specificity of 20 (two classes).
Why does this strange word matter in your case?
Your selector with default transform value below has a specificity of 10 :
.box{
transform: translateX(4000%);
}
The following selector
.box:nth-of-type(even){
transform: translateX(-4000%);
}
has a specificity of 20 , and will override same CSS attributes from selectors with lower specificity. So your even animation works by overriding .box{transform: translateX(4000%);} .
But .show{ transform: translateX(0%); } .show{ transform: translateX(0%); } doesn't have a higher specificity, so it can fail to override the original value.
.box.show{transform: translateX(0%);} however, has specificity of 20 and will definitely override the original value just like the selector for even elements.
Read more about specificity with illustrations here: specifics-on-css-specificity
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.