Class dot class with CSS

HTML-CSS
1

I understand addClass and removeClass with javascript and is fine but what about this

.myclass.myanotherclass

If use in HTML something like add two class name in a class section like

<div class="myclass myanotherclass">

This way need that dot? But if not use it that is also accepted way?

as I understand is same as if write one by one? Like

.myclass
{
color: red;
}

myanotherclass
{
color: blue;
}

vs

.myclass.myanotherclass
{
color: blue;
}

Logic? Try to understand!

Thanks

2

It is not the same. In your example, the outcome might be the same but that is because of the order of the selectors and the cascade.

The className.className selector has higher specificity which will affect the cascade. The selector will also only match an element with both classes.

https://codepen.io/anon/pen/NmoVJO

1 Like
3

Echoing what lasjorg stated, it’s about the CSS Specificity.

https://flaviocopes.com/css-specificity/ goes over different aspects of CSS Specificity. Once you understand the general concepts, there’s a good calculator for comparing selectors - https://specificity.keegan.st/, and there there are also lots of fun charts that you can use as a reference:

Even better —and once you understand the principal’s of CSS Specificity— if you dive into your devtools you can see what styles are active and which one’s have been overridden - https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

1 Like