Skip to content
Advertisement

What is the difference between adding .classA and .classB.classA in CSS?

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.

JavaScript
JavaScript
JavaScript

Advertisement

Answer

.classA targets elements with CSS classclassA 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:

JavaScript

The following selector

JavaScript

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%); } 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

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement