0

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

Abin Thaha
  • 4,248
  • 3
  • 12
  • 38
user3657393
  • 3
  • 1
  • in the first example .dropbtn is a child, and it get selected only if it is a son of dropdown. The second select .dropdown when hover it and an element with class .dropbtn – Sfili_81 Oct 01 '21 at 12:06
  • The mentioned duplicate was easily found by typing "what does the comma mean in css selector" into Google, btw. Please make a _proper_ effort to inform yourself, before you come asking. – CBroe Oct 01 '21 at 12:07

2 Answers2

0

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>
Abin Thaha
  • 4,248
  • 3
  • 12
  • 38
0

.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

core_dumps
  • 1