&:first-of-type li not working in SCSS

Question

I'm trying to get the first li element in a ul with the class breadcrumbs to have a red background, and it's not working. I'm sure I'm missing something simple, but what?

.breadcrumbs {
            margin-left:-30px;
            p {
                display:inline;
            }
            li {
                display:inline;
                &::before {
                    content:'>> ';
                }

            }   
            &:first-of-type li {
                background:$red;                                
            }                   
        }

Answer 1

You have the pseudo selector in the wrong place.

.breadcrumbs {
            margin-left:-30px;
            p {
                display:inline;
            }
            li {
                display:inline;
                &::before {
                    content:'>> ';
                }
               &:first-of-type {
                  background:$red;                                
               }
            }   

        }