why does the putting space in hover effecting the output behavior

Question

I have this code in CSS:

 .card:hover{
    transform: scale(1.04);
    transition: 0.3s ease-in-out;

  }

This work perfectly fine but when I put space after card (card :hover) it starts scaling individual element

Answer 1

It's because it's pointing to child elements inside of the card being hovered over. Adding the space meant that it's a new selector. For example:

header div {background : red;}

That changes every div inside of the header to have a red background.

":hover" can stand alone as a selector. So, div:hover and div :hover, are both valid, and the second one points to the children of div.

Example:

div.example-a:hover {
  background : black;
}

div.example-b :hover {
  background : black;
}

h1 {
  font-family : sans-serif;
  font-size : 16px;
}

div {
  display : inline-block;
  transition : 300ms background ease-in-out;
}

div.example-a, div.example-b {
  padding : 9px;
  border-radius : 8px;
  background : #F7F7FF;
}

div.example-a div, div.example-b div {
  display : inline-block;
  width : 30px;
  height : 30px;
  border-radius : 8px;

}

div.element-1 {
  background : green;
}

div.element-2 {
  background : blue;
}

div.element-3 {
  background : red;
}

div.example-a:hover {
  
}

<h1>Example A</h1>
<div class="example-a">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>

<h1>Example B</h1>
<div class="example-b">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>