I have a question about this selectors in CSS.

What's the difference between :

.dropdown:hover .dropbtn {background-color: #3e8e41;}

AND

.dropdown:hover, .dropbtn {background-color: #3e8e41;}

I don't understand why in the first example we don't use a comma. What is the difference between using a comma or not

CodePudding user response：

Well, as per the snippet below:

1. .dropdown:hover .dropbtn {background-color: #3e8e41;} does means that, when mouse is hovered over .dropdown, the child element .dropbtn should change it's color

2. .dropdown:hover, .dropbtn {background-color: #3e8e41;}. If .dropdown:hover, then its color should be #3e8e41, and always the color of .dropbtn should be #3e8e41.

So the difference is that, first one selects its child when mouse is hovered over, and apply the color, while the second one will always apply color to .dropbtn instead of mouse hovered over or not on the .dropdown.

.sample:hover span {
  background-color: #3e8e41;
}
.sample:hover,
span {
  background-color: red;
}

<div class="sample">
  Hellow
  <span>Hello</span>
</div>

<div>
  Hellow
  <span class="sample">Hello</span>
</div>

CodePudding user response：

.dropdown:hover, .dropbtn {background-color: #3e8e41;} The property will applied to both the classes.

.dropdown:hover .dropbtn {background-color: #3e8e41;} The property is only applied to .dropbtn class elements when it's a descendant of the former class