How does Chrome dev tools generate CSS selectors?

Question

When adding a new style rule for an element, the selector that Chrome generates contains the entire hierarchy instead of just the class name.

For example:

Answer 1

There are multiple reasons this could be happening. Without knowing the exact attributes being taken its hard to tell. Also seeing your css would help as well.

To the best I understand you are asking why when you it takes its parent div and parent body attributes as well.

This could be because it is itself a child of body and div

Another logical explanation here is a working example on jsfiddle

Depending on your elements you could have something conflicting. In the case of my example the !important tag is added giving its color attribute precedence over the span class But in the next line it applies fine.

      

           I am being applied
          

              I am helper but i am not red
          
    
      


body > div > span {
    color: red !important;
}
.helper { color: green }