If you worked for a while in CSS you may have used pseudo classes, and here is the general structure of pseudo class usage in CSS shown below:

li {
  float: left;
  padding: 5px;
  background: black;
}
li:hover {
  background: orange;
}

It’s very basic example of pseudo class usage in CSS, the purpose is simple. We’r providing a black background to li selector and change that background color to orange on hover. Here “hover” is pseudo class. Some from you may have realized that we’ll be making li as parent and “hover” pseudo class as child as we did in previous nesting lesson.

Yes, you are right. But there is slight change in pseudo class usage than we discussed previously. We don’t make it just child of parent while we use “ampersand” symbol just before the name of pseudo class to properly apply that style. It’s confusing at the moment, just look at the same previous example but this time in less.

li {
  float: left;
  padding: 5px;
  background: black;
  &:hover {
 background: orange;
  }
}

Simple is that, “ampersand” symbol just concatenates the pseudo class with it’s parent. In this fashion we can use any pseudo class we want to use, for example have a look below:

li {
  margin-left: 10px;
  padding-right: 10px;
  &:first-child {
  margin-left: 0;
  }
  &:last-child {
  padding-right: 0;
  }
}

In above example we are doing in same fashion, but it’s just explanation of other pseudo classes as we are using “first-child” and “last-child” pseudo class in above code.